移動端自適應佈局的最好工具-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有關:

rem基準值計算

關於rem的基準值,也就是上面那個37.5px其實是根據我們所拿到的視覺稿來決定的,主要有以下幾點原因:

1.由於我們所寫出的頁面是要在不同的螢幕大小裝置上執行的,所以我們在寫樣式的時候必須要先以一個確定的螢幕來作為參考,這個就由我們拿到的視覺稿來定;假如我們拿到的視覺稿是以iphone6的螢幕width=375px為基準:

ar docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;

這樣計算出來的rem基準值就是37.5(iphone6的視覺稿),這裡為什麼要除以10呢,其實這個值是隨便定義的,因為不想讓html的font-size太大,當然也可以選擇不除,只要在後面動態js計算時保證一樣的值就可以

動態設定html的font-size

現在關鍵問題來了,我們該如何通過不同的螢幕去動態設定html的font-size呢,這裡一般分為兩種辦法:

1.利用css的media query來設定:

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
      html{font-size: 37.5px;}
}

2.利用javascript來動態設定,根據我們之前算出的基準值,我們可以利用js動態算出當前螢幕所適配的font-size:

document.getElementsByTagName(`html`)[0].style.fontSize = window.innerWidth / 10 + `px`;

由此可見我們可以通過設定不同的html基礎值來達到在不同頁面適配的目的,當然在使用js來設定時,需要繫結頁面的resize事件來達到變化時更新html的font-size

rem適配進階

一般我們獲取到的視覺稿大部分是iphone6的,所以我們看到的尺寸一般是雙倍大小的,在使用rem之前我們一般會自覺的將標註/2其實這也並非沒有道理;但是當我們配合rem使用時,完全可以按照視覺稿上的尺寸來設定

1.設計給的稿子雙倍的原因是iphone6這種螢幕屬於高清屏,也即是裝置畫素比(device pixel ratio)dpr比較大,所以顯示的畫素較為清晰

2.一般手機的dpr是1,iphone4，iphone5這種高清屏是2,iphone6s plus這種高清屏是3,可以通過js的window.devicePixelRatio獲取到當前裝置的dpr,所以iphone6給的視覺稿大小是(*2) 750×1334了

3.拿到dpr後,我們就可以在viewport meta頭取消讓瀏覽器自動縮放頁面,而自己去設定viewport的content例如(這裡之所以要設定viewport是因為我們要實現border:1px的效果,假如我給border設定了1px,在scale的影響下,高清屏中就會顯示成0.5px的效果)

meta.setAttribute(`content`, `initial-scale=` + 1/dpr + `, maximum-scale=` + 1/dpr + `, minimum-scale=` + 1/dpr + `, user-scalable=no`);

4.設定完之後配合rem修改

@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

rem佈局中需要引入的完整js程式碼

({
  resetRem:function(){
    this.setRem();
    this.on();
  },
  setRem:function(){
    var me = this;
    var rect = window.document.documentElement.getBoundingClientRect();
    var width = rect.width > 750 ? 750 : rect.width;
    window.rootEm = parseFloat(width / 320 * 20);
    document.getElementsByTagName(`html`)[0].style.fontSize = rootEm + "px";  
  },
  on:function(){
    var me = this;
    window.onresize = function() {
      window.setTimeout(me.setRem, 300);
    }   
  }
})();

假設設計稿是:750px,則$rem=750/320*20=46.875;

感悟：不管男人女人，都一定要經濟獨立