rem布局

rem布局

- 为head添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
- js设置根节点字体大小 一般可以选择设计图屏宽的10分之一。因为这样可以通过sass等变量计算直接写设计图的数量单位。rem对应大小 = 设计图山大小/(设计图手机宽/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');
      
      // 设置根字体大小
      function setRootSize() {
        var rootWidth = docEl.offsetWidth;
        // 将设计图分成10等份
        rootFontSize = rootWidth / 10;
        window.rootFontSize = rootFontSize;
        docEl.style.fontSize = rootFontSize + 'px';
        // 防止部分手机rem换算bug，需要打个补丁，检测修复一下
        remPatch();
      }

      // 检测rem比，并调整
      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;
      }

    })();