2024 年，我终于用上 rem 了......

为什么要用 rem？

在响应式设计中，rem 是一个非常有用的单位。它相对于根元素的字体大小，这意味着我们可以通过改变根元素的字体大小来缩放整个页面。

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

// 使用 rem 单位
.container {
  width: 50rem; // 相当于 800px
}
      

与其他单位的比较

rem 与 em 和 vw 的主要区别：

• em：相对于父元素的字体大小
• rem：相对于根元素的字体大小
• vw：相对于视口宽度的百分比

使用 rem 的好处是可以通过媒体查询改变根元素的字体大小，从而实现整个页面的缩放。