HTML中如何使用rem

發(fā)布時(shí)間：2018-10-16 熱度：

大家好我是在石家莊做網(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)單的類(lèi)型

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ò)媒體查詢(xún)標(biāo)簽動(dòng)態(tài)定義html的font-size屬性進(jìn)而實(shí)現(xiàn)根據(jù)屏幕變化，改變1rem=多少px

第三種會(huì)涉及到js

//定義一個(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

以上就是石家莊尚武科技做網(wǎng)站開(kāi)發(fā)的工程師為大家?guī)?lái)的關(guān)于rem的相關(guān)介紹，希望對(duì)大家有所幫助。

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