rem 布局介绍

Question

var docEl = document.documentElement || document.body
function setRemUnit () {
  var rem = docEl.clientWidth / 10
  docEl.style.fontSize = rem + 'px'
}
setRemUnit()

rem 是相对于 html 节点的 font-size 来做计算的。

我们通过设置 document.documentElement.style.fontSize 就可以统一整个页面的布局标准。

上面的代码中，将 html 节点的 font-size 设置为页面 clientWidth（布局视口）的 1/10，即 1rem 就等于页面布局视口的 1/10，这就意味着我们后面使用的 rem 都是按照页面比例来计算的，这时我们只需要将 UI 出的图转换为 rem 即可。

以 iPhone6 为例：布局视口为 375px，则 1rem = 37.5px，这时 UI 给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75 / 37.5 = 2rem。

当然，每个布局都要计算非常繁琐，我们可以借助 PostCSS 的 px2rem 插件来帮助我们完成这个过程。

下面的代码可以保证在页面大小变化时，布局可以自适应，当触发了 window 的 resize 和 pageShow 事件之后自动调整 html 的 fontSize 大小。

window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
})