移動端自適應佈局的最好工具-rem

提到rem,你們首先會想到的是em/px/pt這類的詞語,大多數人眼中這些單位是用於設置字體的大小的,沒錯這的確是用來設置字體大小的,可是對於rem來講它能夠用來作移動端的響應式適配哦

先看看兼容性,關於移動端:

ios:6.1系統以上都支持

android:2.1系統以上都支持

基本上主流瀏覽器都支持,能夠安心的往下看了

rem設置字體大小
rem是(font size of the root element),意思就是根據網頁的根元素來設置字體大小,和em(font size of the element)的區別是:em是根據其父元素的字體大小來設置,而rem是根據網頁的根元素(html)來設置字體大小的,舉一個簡單的例子

如今大部分瀏覽器IE9+/Firefox/Chrome/Safari/Opera,若是咱們不修改相關的字體配置,都是默認顯示font-size是16px即

html {
font-size:16px;
}
那麼若是咱們想給一個P標籤設置12px的字體大小那麼用rem來寫就是

p {
font-size:0.75rem; //12÷16=0.75(rem)
}
基本上使用rem這個單位來設置字體大小基本上是這個套路,好處是假如用戶本身修改了瀏覽器的默認字體大小,那麼使用rem時就能夠根據用戶的調整的大小來顯示了;可是rem不只能夠適用於字體,一樣能夠用於width/height/margin這些樣式的單位;下面來具體說一下

rem進行屏幕適配
在講rem屏幕適配以前,先說一下以前作移動端適配的方法,通常能夠分爲:

1.簡單一點的頁面:通常高度直接設置成固定值,寬度通常撐滿整個屏幕

2.稍複雜一些的是利用百分比設置元素的大小來進行適配,或者利用彈性佈局flex等css去設置一些須要定製的寬度

3.再複雜一些的響應式頁面,須要利用css3的media query屬性來進行適配,大體思路是根據屏幕不一樣大小來設置對應的css樣式

上面的一些方法其實也能夠解決屏幕適配等問題,但這裏主要介紹的是我在目前工做過程當中認爲兼容性最好的佈局方案——rem(什麼是rem)佈局:

rem適配
< style>
.con {
width: 10rem; height: 10rem; background-color: red;
}
< /style>
< div class="con">< /div>
這是一個div,寬度和高度都用rem來設置了;在瀏覽器裏面width和height分別是160px,正好是16px*10,那麼若是將html根元素的默認font-size修改一下呢?

< style>
html {
font-size: 17px;
}
.con {
width: 10rem; height: 10rem; background-color: red;
}
< /style>
< div class="con">< /div>
再來看結果:這時width和height都是170px,這就說明了將rem應用於width和height時一樣適用rem的特性,根據根元素的font-size值來改變自身的值,由此咱們應該能夠聯想到咱們能夠給html設定不一樣的值,從而達到咱們css樣式中的適配效果

我有幾張阿里雲幸運券分享給你，用券購買或者升級阿里雲相應產品會有特惠驚喜哦！把想要買的產品的幸運券都領走吧！快下手，立刻就要搶光了。
rem數值計算
若是利用rem來設置css的值,通常要經過一層計算才行,好比若是要設置一個長寬爲100px的div,那麼就須要計算出100px對應的rem值是100/16=6.25rem,這在咱們寫css中其實算比較繁瑣的一步操做了,
對於沒有使用sass的工程:

爲了方便起見,能夠將html的font-size設置成100px/10px,這樣在寫單位時,直接將數值除以100/10px在加上rem的單位就能夠了

對於使用sass的工程:

前端構建中,徹底能夠利用scss來解決這個問題,例如咱們能夠寫一個scss的function px2rem即:

@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
這樣當咱們寫具體數值的時候就能夠寫成:

height: px2rem(90px);
width: px2rem(90px);
這裏你可能會發現一些不理解的地方,就是上面那個$rem:37.5px是怎麼來的,正常狀況下不是默認的16px麼,這個其實就是頁面的基準值,和html的font-size有關:
原文連接