移动端自适应

移动端自适应

根据 根节点html的font-size，使用rem布局

方案一（老式）

(function (window, document) {

  function resize(){
    var ww = window.innerWidth;
    if (ww > window.screen.width) {
      window.requestAnimationFrame(resize);
    }
    else {
      if (ww > 750) ww = 750;
      // 下面代码按照比例为100px = 1rem，此处一定要同pxToRem的转换比例
      document.documentElement.style.fontSize = ww * 100 / 750 + 'px';
    }
  }

  if (document.readyState !== 'loading') {
    resize();
  } else {
    document.addEventListener('DOMContentLoaded', resize);
  }

  window.addEventListener('resize', resize);

})(window, document);

方式二（推荐）

根节点html增加如下（设计稿宽度750）：

html {
  font-size: calc(100vw / 750 * 100);
}