移動端布局，字體使用rem不生效問題

本文參考連接：https://blog.csdn.net/qq_35484341/article/details/78248371

移動端布局是最讓我感到頭疼的一件事，一直都是逃避的心態，不想面對，但沒辦法，公司前端就我一個人，所有的問題遲早都要自己解決，所以不得不開始摸索，最快的辦法就是看前輩們都是怎么解決的，但是有些辦法不一定適合自己，要挨個試，才知道哪個方法好用，這次我就來記錄一下移動端布局rem不生效的問題。

眾所周知，rem是相對於html元素的font-size大小而言的，而em是相對於其父元素，所以要用rem布局的話就必須設置根元素html的font-size大小，要是不設置的話根元素大小就默認是16px，也就是1rem = 16px;然后發現不好換算，所以就設置成了10px;，這樣就是在寫css的時候就直接除以10。

 

 

 但是這樣寫，字體大小並不能隨着屏幕大小縮放而變換，這時候需要配合js來使用了。

一、使用js

(function(){ function w() { var r = document.documentElement; var a = r.getBoundingClientRect().width;//獲取當前設備的寬度
        if (a > 720 ){//720不固定，根據設計稿的寬度定
            a = 720; } rem = a / 7.2; r.style.fontSize = rem + "px" } w(); window.addEventListener("resize", function() {//監聽橫豎屏切換
 w() }, false); })();

將這段代碼寫到html里面，然后我們寫css只需要把對應的值除以100，單位改成rem即可

注意：

1、這段js最好放到頁面的body上面，讓他第一時間加載，防止網速慢而導致屏幕閃爍問題

2、當寫一像素邊框時，最好還是使用1px來寫，因為在部分手機上0.01rem不顯示

但是加上這段js代碼后css寫的html根元素大小並沒有生效，不知道這是怎么回事。

上面的js是一種解決方案，還有另一種

二、html根元素 

 

      html {
       font-size: calc(100vw / 750 * 100);
      }

 

親測這個方法有效

1vw表示1%的屏幕寬度,而我們的設計稿通常是750px的,屏幕一共是100vw,對應750px,那么1px就是0.1333333vw,。

同時我們知道rem,rem是相對html元素的字體大小，為了方便計算,我們取html的font-size=100px,通過上面的計算結果1px是0.13333333vw,那么100px就是13.333333vw了

所以，我們讓1rem=100px=13.333333vw

我們可以直接在html中設置 font-size:13.333333vw;

也可以使用css中的 calc()函數

地址：https://blog.csdn.net/qq_31659129/article/details/93898384?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task