rem布局

- 為head添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
- js設(shè)置根節(jié)點字體大小 一般可以選擇設(shè)計圖屏寬的10分之一。因為這樣可以通過sass等變量計算直接寫設(shè)計圖的數(shù)量單位。rem對應(yīng)大小 = 設(shè)計圖山大小/(設(shè)計圖手機(jī)寬/10)
- css rem書寫
我寫了端js，直接放在頭部就好了筷畦。

(function () {
      var dpr = window.dpr = window.devicePixelRatio || 1;
      var scale = 1;
      var rootFontSize;
      var docEl = document.documentElement;
      var metaEl = document.querySelector('meta[name="viewport"]');
      // 無需縮放髓窜，避免模糊
      metaEl.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
      
      // 設(shè)置根字體大小
      function setRootSize() {
        var rootWidth = docEl.offsetWidth;
        // 將設(shè)計圖分成10等份
        rootFontSize = rootWidth / 10;
        window.rootFontSize = rootFontSize;
        docEl.style.fontSize = rootFontSize + 'px';
        // 防止部分手機(jī)rem換算bug，需要打個補(bǔ)丁酵使，檢測修復(fù)一下
        remPatch();
      }

      // 檢測rem比，并調(diào)整
      function remPatch() {
        var remTestFragment = document.createElement("div");
        remTestFragment.id = 'rem-test';
        remTestFragment.style.width = '10rem';
        remTestFragment.style.boxSizing = 'border-box';
        remTestFragment.style.opacity = 0;
        remTestFragment.style.position = 'absolute';
        remTestFragment.style.bottom = '-1000px';
        setTimeout(function () {
          document.body.appendChild(remTestFragment);
          var remTestNode = document.getElementById('rem-test');
          var currentTestWidth = remTestNode.offsetWidth;
          var rootFontSize = docEl.style.fontSize.replace(/px/, '') * 100;
          var scale = currentTestWidth*10 / rootFontSize;
          rootFontSize = rootFontSize / 100 / scale;
          window.rootFontSize = rootFontSize;
          docEl.style.fontSize = rootFontSize + 'px';
          remTestNode.parentNode.removeChild(remTestNode);
        })
      };

      var delay;
      function onResize() {
        clearTimeout(delay);
        delay = setTimeout(setRootSize, 300);
      }

      window.addEventListener('resize', onResize, false);
      setRootSize();

      // 計算
      window.px2rem = function (designPx) {
        return designPx / dpr / rootFontSize;
      }

    })();