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)
  })

你可能感兴趣的:(rem 网页自适应)