rem 单位详解

在前端响应式布局中，rem 是一个非常经典且实用的相对单位。它的全称是 Root EM，意思是“相对于根元素的字体大小”。

理解 rem 的核心在于一个简单的公式：

Tip

1rem = HTML 根元素的 font-size

1. rem 与 em 的区别

这是面试中最常被问到的对比：

  • em：相对于父元素的 font-size。如果父元素没设置，就向上找，直到根元素。这会导致“嵌套计算”极其复杂（例如：1.2 x 1.2 x 1.2）。
  • rem：始终只相对于 <html> 标签。无论你在页面的哪个角落，1rem 的基准都是唯一的。

2. 为什么需要 rem？（核心价值）

rem 的存在是为了实现等比缩放布局。

假设你设计了一个 375px 宽的页面，里面有一个 100px 的盒子。如果换成 750px 的屏幕，你希望盒子也变大一倍：

  1. 静态单位（px）：在所有屏幕上都是 100px，在大屏上显得很小。
  2. 响应式（rem）：
  • 在 375px 屏幕，设置 html { font-size: 16px; }，盒子设为 6.25rem。
  • 在 750px 屏幕，通过 JS 或媒体查询修改 html { font-size: 32px; }。
  • 结果：盒子的实际宽度自动变为 6.25 x 32 = 200px，实现了完美缩放。

3. rem 布局的实现方案

目前主流有两种方式来动态改变根元素的 font-size：

A. 媒体查询方案 (响应式断点)

适用于希望在不同设备范围（如手机、平板、PC）有阶梯式变化的场景。

html { font-size: 16px; } /* 默认 */

@media (min-width: 768px) {
  html { font-size: 20px; }
}

@media (min-width: 1200px) {
  html { font-size: 24px; }
}

B. 动态 JS 方案 (Flexible 方案)

通过监听窗口大小，实时计算出一个比例。

公式：htmlFontSize = currentWidth / 设计稿宽度 * 100

4. 常见的配置习惯：62.5% 技巧

浏览器默认的 font-size 通常是 16px。如果你觉得计算 1rem = 16px 太麻烦（例如 100px = 6.25rem），可以这样做：

html {
  /* 16px * 62.5% = 10px */
  font-size: 62.5%; 
}

body {
  /* 恢复正常的字体大小，防止继承 */
  font-size: 1.6rem; 
}

/* 现在：1.2rem = 12px, 2rem = 20px，心算极其简单 */
.box { width: 10rem; } /* 100px */

5. rem 的局限性与现状

虽然 rem 统治了移动端布局很长一段时间，但现在有了更好的替代方案：

  • vw / vh：直接相对于视口宽度/高度（1vw = 1% 视口宽度）。它不需要 JS 动态计算根元素，更加纯粹。
  • 现代做法：通常使用 rem 控制间距和 UI 组件大小，而根元素的 font-size 使用 vw 来赋值，实现真正的自动流体布局：
html {
  font-size: calc(16px + 0.5vw); /* 随屏幕宽度平滑缩放 */
}