Rem 自适应原理与应用

前言

移动端适配有很多方案，这篇文章将根据 rem 自适应的原理进行讲解，接下来跟着作者的思路一起来看看吧！

原理

在搞清楚 rem 适配之前，我们先来了解一下什么是 rem？

rem 是一种相对长度单位，它相对于根元素的字体大小（即HTML元素的字体大小）来计算。它的特点是可以根据根元素的字体大小进行缩放，从而实现页面元素的自适应。

举个栗子来说明 rem 的用法：

假设我们将根元素的字体大小设置为 16px，然后我们想要设置一个段落的文字大小为 20px。如果我们使用 rem 单位，我们可以这样设置：

html {
  font-size: 16px; /* 设置根元素字体大小为16px */
}

p {
  font-size: 1.25rem; /* 设置段落的文字大小为根元素字体大小的1.25倍 */
}

在这个栗子中，1rem 等于根元素的字体大小，即16px，所以设置段落的字体大小为 1.25rem 就相当于 20px（16px * 1.25 = 20px）。

一句话总结

rem：相对于根元素的 fontSize 大小，也就是 html 的fontSize大小。

实现

上面我们说了，我们需要根据尺寸的不同去动态修改根元素的字体大小，那实现工作就转换成了

先检测窗口尺寸变化

修改根元素字体大小

好的既然已经知道怎么实现了，我们再来理一下实现思路！

如果我们按照上面的栗子