移动端页面适配

移动端设计稿为 iphone6（375 * 667）

将 rem 值设置为 100px，然后将全局默认字体设置为 0.16rem(16px)。

html {
  font-size: calc((100vw) / 3.75);
}
body {
  font-size: 0.16rem;
}

(function (window, document) {
  var docEl = document.documentElement

  // 设置 1rem = ? px
  function setRemUnit () {
    var rem = docEl.clientWidth / 37.5
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 监听页面尺寸变化重新设置 rem 大小
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
}(window, document))

(function (window, document) {
  var docEl = document.documentElement

  // 设置 1rem = ? px
  function setRemUnit () {
    // 之所以 offsetWidth 是因为限制元素最小宽度
    var rem = docEl.offsetWidth / 19.2 // 100px
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 监听页面尺寸变化重新设置 rem 大小
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
}(window, document))