fontSize.js 在移动端使用rem

根据设计稿的尺寸，比如设计稿的宽的是750*1134 px，在实际写代码的设计稿中的按钮大小，间距都是要除以2的。

如果想1rem对象设计稿中的100px，那么代码如下

;(function(win) {
  var doc = win.document
  var docEl = doc.documentElement
  var tid

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width
    if (width > 540) {
      width = 540
    }
    var rem = width / 7.5

    docEl.style.fontSize = rem + 'px'
  }

  win.addEventListener(
    'resize',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    },
    false
  )
  win.addEventListener(
    'pageshow',
    function(e) {
      if (e.persisted) {
        clearTimeout(tid)
        tid = setTimeout(refreshRem, 300)
      }
    },
    false
  )

  refreshRem()
})(window)

这个时候比如设计稿中的导航栏高度为88px。1rem=100px 也就是0.88rem。实际页面中是44px。