rem 网页自适应

根元素字体大小——rem

rem 官方解释是 font size of the root element，根元素的字体大小。

和 em（font size of the element）的区别是，em 是根据其父元素的字体大小来设置，而 rem 是根据网页的根元素（html）来设置字体大小的。

大多数浏览器默认根元素的字体大小为 16px：

html {
  font-size: 16px;
}

若要用 rem 的形式设置 p 元素的字体大小为 32px，可采用如下方式（即 1rem 代表 16px）：

p {
  font-size: 2rem;
}

rem 实现网页自适应

有上面描述的 rem 用法可知，若 DOM 元素的大小以 rem 作为单位，根元素字体大小发生变化时，该 DOM 元素的实际大小（px）就会随之变化。

由此就可想到，针对不同的屏幕尺寸的网页自适应方案。在 css 样式中采用 rem 单位，网页运行在不同大小的屏幕中时，动态地改变根元素字体大小，即可实现页面样式大小自适应。

其本质是，动态地设置 1rem 等于多少 px。

const doc = window.document // 文档对象
const docEl = doc.documentElement // 文档对象元素

// 根据视窗宽度，设置根字体大小
  const refreshRem = () => {
    const rem = docEl.getBoundingClientRect().width / 10
    docEl.style.fontSize = rem + 'px'
  }

  refreshRem() // 首次加载设置根字体模块

  // 监听resize事件，设置根字体大小
  window.addEventListener('resize', () => {
    window.clearTimeout(tid)
    tid = window.setTimeout(refreshRem, 300)
  })