前言

移動端 rem 適配方案回顧總結

如何使用 rem

rem 單位的計算參考 html 的根節點 font-size進行計算，根節點的字體變化，佈局參考的 rem 頁面也會相應進行縮放，此為 rem 佈局的本質。

1. 動態改變 html 的 font-size 值

幾乎在每個瀏覽器都將 html 的 font-size 初始化 為 16px ， 我們動態改變的話可以暫時將 16px 設置為 rem 適配的根節點 font-size 初始值。

那麼如何進行適配動態修改？

假定設計稿寬度 為 750px，我們定義了自己使用 1rem = 16px 的單位去佈局，如何適配呢？

在 chrome 的 手機 iphone 模擬器寬度為 375px，正好為設計稿的 一半，我們可以口算: 當時的 1rem 應該等於初始化時 html 節點 font-size 的一半,即 newFontSize = 16/2 = 8px,這樣一半對一半不就適配了嗎...

從中得到公式 設計稿寬度/16px = 需要適配的設備寬度/8px,能夠看出 新的 font-size 是參考 當前的設備寬度與原設計稿的寬度，進行等比縮放的

最終得到 newFontSize = 16px * 需要適配的設備寬度 / 原設計稿寬度

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

2. 實際使用

將測量得出的btn 按鈕的樣式從 px轉換 為 rem

.btn {
  width: 699px; /* 699/16 => 43.6875rem; */
  height: 90px; /* 90/16px => 5.625rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/16=> 0.375rem; */
}

自己計算太繁瑣，使用 scss 定義 函數代替計算過程

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

那麼上面的 css改寫為:

.btn {
  width: pxToRem(699);
  height:pxToRem(90);
  background: rgba(90, 173, 246, 1);
  border-radius:pxToRem(6);
}

補充： vscode 的插件 cssrem 支持計算 將我們在 css,scss 中輸入的 px 轉換為 rem 單位，默認設置的 font-size 為 16px

計算方法變形，口算 rem

1. 簡單分析

分析上一節我們最終得到 newFontSize = 16px * 需要適配的設備寬度 / 原設計稿寬度

每次計算要除以 16 很是繁瑣，我們若將 初始的 html 根節點 font-size變為方便計算的，反正它最終做為一個除數，變為多少呢? 是否 100 更為方便呢？對了！

const oHtml = document.documentElement;
const clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
// 移動設備
oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

2. 實際使用

還是上面熟悉的那個 btn, 將px轉換 為 rem, 口算得出結果。

.btn {
  width: 699px; /* 699/100 => 6.99rem; */
  height: 90px; /* 90/100 => 0.9rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/100=> 0.06rem; */
}

不得不説，有了 scss 是真的方便！

@function reduced100($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

那麼上面的 css函數方法改寫為:

.btn {
  width: reduced100(699);
  height:reduced100(90);
  background: rgba(90, 173, 246, 1);
  border-radius:reduced100(6);
}

怎麼樣，rem 原來就是這麼簡單！！！

工具函數

上面的方法，二選其一就可以了，畢竟現在 javascript 的 執行效率不差！

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);