移动端根据屏幕宽度适配rem

常见设计稿尺寸为 750px ， 此处以 750 为基准，当屏幕宽度为750px 时设置 html 根节点的 font-size 为 100px，1rem = 100px。故此，将屏幕宽度像素与750 的比值与 100px 相乘，得到最后的 font-size 为 html 的字体大小。后面的样式书写中，即可按照设计稿尺寸进行转换，(设计稿尺寸 × 0.01) rem 

<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        widthPoint = 750,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= widthPoint) {
            docEl.style.fontSize = '100px';
          } else {
            docEl.style.fontSize = 100 * (clientWidth / widthPoint) + 'px';
          }
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);

      docEl.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      }, false);

    })(document, window);

  </script>

 有些机型上没法监听  DOMContentLoaded  事件，若放在 window.onload 里执行，就会导致页面加载过程中出现一闪而过的缩放过程。考虑以上，引入 jquery ，放在 $(document).ready(function(){}) 中

$(function(){
  // 设置 rem 单位
  setRem(document, window)
})

function setRem(doc, win) {
  var docEl = doc.documentElement,
    widthPoint = 750,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= widthPoint) {
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / widthPoint) + 'px';
      }
    };
  recalc()
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  // doc.addEventListener('DOMContentLoaded', recalc, false);

  docEl.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  }, false);
}

 

-- end --