分分鐘讀懂移動端rem使用方法
1、為什麼要用rem
移動端最麻煩的是什麼?
不同解析度適配!
具體來說,有的螢幕320px寬,有的螢幕640px寬,有的更寬,如果你寫固定px,那麼要麼小的放不下,要麼大的有大片空白。
怎麼辦?
如果元素固定佔用螢幕空間(一般是指寬度而非高度,下同)的百分之xx就ok了。
比如320px的10%是32px,640px的10%是64px,
如果10個10%寬度的元素放在一起,那肯定就是100%,即擠滿螢幕(寬度),不會超出,也不會留白。
簡單理解:
rem 就是指螢幕寬度的百分之x;
或者說,n個rem = 使用者可視區域100%寬度
注意,之所以不說高度,是因為寬度(x軸)滿了後,y軸(高度)方向的內容可以通過滾動螢幕來檢視
上例項:
1、設計師給一個640px寬度的設計圖,
2、你假定64rem=100%寬度(這裡是640px),那麼1rem=10px;
3、你照著寫出了靜態頁面,然後按照1rem=10px的比例,將設計圖上的元素的大小,全部用rem寫下;
4、完美,你寫的靜態頁面在640px寬度的頁面上正常展示了;
5、A使用者使用的是320px寬度的手機,因為你假設64rem=100%寬度,因此此時1rem=5px(320/64=5),於是也完美展示了;
2、rem怎麼用?
- rem是css單位;
- 1rem的大小是通過html下的font-size這個css屬性告訴瀏覽器的;
- 使用替換px所在的位置即可
假定你預設在設計稿的時候 1rem = 10px;
然後一個元素(class=”ele”)的寬度是20px,高度30px(設計稿),
那麼你的css這麼寫就可以了;
html {
font-size: 10px;
}
.ele {
width: 2rem;
height 3rem; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3、在任何解析度下都適用
發現問題在哪裡了麼?如何確認1rem等於多少px?
原因是rem是css中使用的單位,css是不會幫你計算1rem是多少px的,只能通過你自己來計算。
計算方式很簡單,簡單來說:
1、你有一個設計稿A(假定640px),有一個預設的rem和px的比例B(假如是1rem = 10px)
2、獲取使用者瀏覽器的可視區域的寬度C(假如是320px),那麼他此時1rem的尺寸D 可以根據 B/A = D/C 這個公式得知
3、原因是你假定螢幕可以容納多少個rem,這是一個固定比例(如這裡就是64rem)
1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;
- 1
- 2
- 3
4、其他
1、使用者載入完後,你就得設定好1rem的尺寸吧(記得是設定在html元素下的font-size);
2、假如使用者螢幕的尺寸會變,你肯定得考慮吧(重新整理1);
3、你懶得去找相應的程式碼,我總得給你吧(如下);
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//這裡是假設在640px寬度設計稿的情況下,1rem = 20px;
//可以根據實際需要修改
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
直接執行即可