HTML中如何使用rem

大家好我是在成都做網(wǎng)站開(kāi)發(fā)的一名網(wǎng)站開(kāi)發(fā)工程師

最近在進(jìn)行網(wǎng)站開(kāi)發(fā)時(shí)發(fā)現(xiàn)了rem這個(gè)方法，下面我?guī)Т蠹伊私庖幌翲TML紅如何使用rem布局。

我們先來(lái)簡(jiǎn)單了解rem是什么：rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位。

所以我們只要定義好html的字體大小就可以了。

那么下面我就介紹三種rem的用法

第一種是最簡(jiǎn)單的類型

1.我們可以直接給html標(biāo)簽一個(gè)固定的font-size屬性如html{fon-size: 10px;} 這種情況1rem就等于是10px,做到響應(yīng)式的朋友可以嘗試使用第二種方法

2.@media (min-width:640px){html{font-size:24px;}} //我們可以通過(guò)媒體查詢標(biāo)簽動(dòng)態(tài)定義html的font-size屬性進(jìn)而實(shí)現(xiàn)根據(jù)屏幕變化，改變1rem=多少px

第三種會(huì)涉及到j(luò)s

//定義一個(gè)函數(shù)

3. var fon = function () {

// 這個(gè)a就是瀏覽器可是寬度

var a=document.body.offsetWidth

//我們可以根據(jù)瀏覽器可是寬度來(lái)設(shè)置html的font-size屬性

//屏幕可視寬度大于等于1023

if(a>=1023){

document.getElementsbyTagName("html")[0].style.fontSize = a/19.20 + 'px'; //把rem的值復(fù)制給頂級(jí)標(biāo)簽html的font-size

//我這里是做了兩種適配，第一種瀏覽器可視寬度是1920px 所以讓1920/19.2=100 1em=100px

//1920/192=10 1rem=10px

console.log(document.body.offsetWidth /19.20)

}else{//我這里因?yàn)槌贿M(jìn)所以調(diào)用一下下面的方法

document.getElementsbyTagName("html")[0].style.fontSize = Math.round(a/4.14) + 'px'; //把rem的值復(fù)制給頂級(jí)標(biāo)簽html的font-size

//我這里是做了兩種適配，第二種瀏覽器可是寬度是414px 所以讓414/4.14

console.log(document.body.offsetWidth /4.14)

}

}

fon()

//瀏覽器可視寬度變化就執(zhí)行這個(gè)調(diào)用一下函數(shù)，更改html的font-size屬性

window.onresize = function () {

fon()

}

//像這種除不盡的情況大家可以使用下面的方法，先取整然后再更改html的font-size屬性

414/4.14=100.00000000000001

//round: 四舍五入

//Math.round(414/4.14) = 100

以上就是成都創(chuàng)新互聯(lián)做網(wǎng)站開(kāi)發(fā)的工程師為大家?guī)?lái)的關(guān)于rem的相關(guān)介紹，希望對(duì)大家有所幫助。

如果大家對(duì)rem還有什么想要了解，大家可以關(guān)注成都創(chuàng)新互聯(lián)官方公眾號(hào)“創(chuàng)新互聯(lián)π”，其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時(shí)歡迎大家一起討論技術(shù)問(wèn)題。

網(wǎng)頁(yè)名稱：HTML中如何使用rem
文章來(lái)源：http://www.bm7419.com/news45/310695.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗(yàn)、ChatGPT、網(wǎng)站收錄、外貿(mào)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)