移动端（H5）开发页面适配方法

• rem：区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

• 使用js获取当前页面尺寸，转换为HTML字体大小，使用rem作为尺寸单位，达到适配目的。

• 可以使用postman工具自动转换px为rem，在书写代码的时候直接使用px。

• 代码

!(function(win, doc) {
  function setFontSize() {
    // 获取window 宽度
    // zepto实现 $(window).width()就是这么干的
    var winWidth = window.innerWidth;
    doc.documentElement.style.fontSize = (winWidth / 750) * 100 + "px";
  }
  var evt = "onorientationchange" in win ? "orientationchange" : "resize";
  console.log(evt, 35);
  var timer = null;
  win.addEventListener(
    evt,
    function() {
      clearTimeout(timer);

      timer = setTimeout(setFontSize, 300);
    },
    false
  );
  win.addEventListener(
    "pageshow",
    function(e) {
      if (e.persisted) {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
      }
    },
    false
  );
  //初始化
  setFontSize();
  // ==========================================
})(window, document);