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

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

我們先來簡單了解rem是什么：rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。 

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

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

第一種是最簡單的類型

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

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

第三種會涉及到js

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

3. var fon = function () {

                             // 這個a就是瀏覽器可是寬度

                            var a=document.body.offsetWidth

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

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

                      if(a>=1023){

                                          document.getElementsByTagName("html")[0].style.fontSize = a/19.20 + 'px'; //把rem的值復(fù)制給頂級標(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{                                                                                                                //我這里因為除不進所以調(diào)用一下下面的方法

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

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

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

                 }

}

fon()  

//瀏覽器可視寬度變化就執(zhí)行這個調(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)站開發(fā)的工程師為大家?guī)淼年P(guān)于rem的相關(guān)介紹，希望對大家有所幫助。

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