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

本文參考連線：

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

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

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

一、使用js

(function

() rem = a / 7.2;
r.style.fontsize = rem + "px"}
w();
window.addeventlistener("resize", function() , 
false
);})();

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

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

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

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

二、html根元素 

html

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()函式

移動端使用rem布局

移動端的px其實指的是pt，也就是邏輯解析度。以iphone6為例，寬度是750px，但是在css中iphone6的寬度是375px，也就是375pt，而設計稿一般是750px的。所以在移動端中css的px是設計稿中px的一半。將設計稿中的px轉換為移動端中的px 如果設計稿是750px的，在其中有...

移動端rem布局

時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...

rem移動端布局

1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...