移動端rem距離單位的使用

在作移動端開發的時候你們確定會遇到適配問題，手機的屏幕大小有很是多的類別，使用傳統的px距離單位已經沒法知足咱們的須要，因而rem便橫空出世，他與百分比定位是比較像的，可是也是有必定的區別，在這裏就跟你們分享一下rem的使用方法。

rem是一個相對單位，他的大小是能夠根據你的計算來定的，好比說在個人移動端網頁中rem與px的換算規則以下：

1 rem = 100 px

在UI給個人設計稿中是以750px的寬度爲標準設計的，因而在個人移動端網頁中就以750px爲標準規定rem的換算規則，請看如下代碼：

(function(doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
  recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大於750的字體大小爲100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此處以 iPhone6 兩倍設計稿 寬度750px 佈局頁面
     * 根據具體狀況改變這兩個數值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

大體原理就是監聽window的resize，當瀏覽器窗口大小變化時就會觸發我設置的函數，從新定義rem的換算規則，這樣就能夠對不一樣屏幕大小的距離單位進行適配。