説一下rem 與 em 有什麼區別

rem 是基於 html 元素的字體大小來決定，而 em 則根據使用它的元素的大小決定,一般被稱為相對長度單位,是根據它父元素的字體大小來計算的，一般默認情況下：16px = 1em

如果父元素font-size:16px,子元素margin:0.8em。那麼得到的大小就是:0.8 * 16 =12.8。

當所有單位都採用em時，我們只需要改變body的font-size，那麼其他子元素寬度就能動態變化了，顯然方便很多

em 和 rem 單位之間的區別是瀏覽器根據誰來轉化成 px 值

rem是css3新增的一個相對長度單位，它的出現是為了解決em的缺點，em可以説是相對於父級元素的字體大小，當父級元素字體大小改變時，又得重新計算。

rem出現就可以解決這樣的問題，rem只相對於根目錄，即HTML元素。有了rem這個單位，我們只需要調整根元素html的font-size就能達到所有元素的動態適配了

移動端-以一個固定尺寸(750px)為標準-將 px 轉化為 rem

(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var devicePixelRatio = win.devicePixelRatio;
  var dpr = 1;
  var scale = 1;

  // 設置vierPort
  function setViewport() {
    dpr = 1;
    win.devicePixelRatioValue = dpr;
    scale = 1 / dpr;
    var metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute(
      'content',
      'initial-scale=' +
        scale +
        ', maximum-scale=' +
        scale +
        ', minimum-scale=' +
        scale +
        ', user-scalable=no'
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  setViewport();
  var newBase = 100; // 把頁面劃分為100等分

  // 設置Rem
  function setRem() {
    var visualView = Math.min(
      docEl.getBoundingClientRect().width,
      lib.maxWidth
    );
    newBase = (100 * visualView) / lib.desinWidth;
    docEl.style.fontSize = newBase + 'px';
  }

  var tid;
  lib.desinWidth = 640;
  lib.baseFont = 18;
  lib.maxWidth = 540;
  lib.init = function() {
    win.addEventListener(
      'resize',
      function() {
        clearTimeout(tid);
        tid = setTimeout(setRem, 300);
      },
      false
    );
    win.addEventListener(
      'pageshow',
      function(e) {
        if (e.persisted) {
          clearTimeout(tid);
          tid = setTimeout(setRem, 300);
        }
      },
      false
    );
    if (doc.readyState === 'complete') {
      doc.body.style.fontSize = lib.baseFont * dpr + 'px';
    } else {
      doc.addEventListener(
        'DOMContentLoaded',
        function(e) {
          doc.body.style.fontSize = lib.baseFont * dpr + 'px';
        },
        false
      );
    }
    setRem();
    docEl.setAttribute('data-dpr', dpr);
  };
})(window, window['adaptive'] || (window['adaptive'] = {}));
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 12;
window['adaptive'].maxWidth = 540;
window['adaptive'].init();

以上代碼以設計稿 750px 的為標準,如果是非 750px,在實際頁面中,將它轉化為 750,然後再做轉化

100px  = 1rem;
750px = 7.5rem;

將這段js代碼命名為一個mobile-adaption.js引入到頁面中,就可以愉快的使用了,將px轉化為rem,實現自適應佈局

在不同的設備當中保持一致,每個公司對於移動端都有自己的一套標準,也有用淘寶flexible.js做適配的

使用可參考手淘適配

• 手把手教你用vuepress搭建網站
• Js面試-筆試真題-請説一下Js中的事件循環機制