rem 是什么：1rem 为什么常等于 16px

1rem 之所以常常等于 16px，不是因为 CSS 规范强制写死了 16，而是因为 rem 取的是根元素 html 的 font-size，而主流浏览器默认根字号通常就是 16px。真正重要的问题不是“怎么把 1rem 改成别的值”，而是“你的设计系统到底该不该依赖改根字号这件事”。

目录

• rem 到底相对谁
• 为什么很多页面里 1rem = 16px
• 怎么修改 rem 的基准
  • 直接改 html 的 font-size
  • 用媒体查询按屏幕调根字号
• 62.5% 方案还能不能用
• 局部改字号，不会改变 rem 的根
• rem 适合什么，不适合什么
• 一个更稳的写法
• 结论
• 参考资料

rem 到底相对谁

rem 是 root em，也就是“相对根元素字号的长度单位”。

html {
  font-size: 16px;
}

.card-title {
  font-size: 1.5rem;
}

这里 1.5rem 就等于 24px。如果把根字号改成 18px，同样的 1.5rem 就会变成 27px。

这和 em 不一样：em 更容易随着父级层层叠加，rem 则始终回到根元素计算。想弄清 em、rem 和百分比的继承差异，可以接着看 CSS 继承与重置指南。

为什么很多页面里 1rem = 16px

浏览器一般会给 html 一个默认字号，所以很多页面在没有额外声明时会得到：

html {
  font-size: 16px;
}

这只是默认值，不是不可修改的规则。MDN 对 rem 的说明也是“相对 root element 的 font-size”，并给出了 html { font-size: 16px } 的示例。这里我依据的是 MDN 的 CSS units 文档。

怎么修改 rem 的基准

直接改 html 的 font-size

html {
  font-size: 18px;
}

这样整站所有基于 rem 的尺寸都会一起变化，适合：

• 你已经用 rem 建了统一 spacing / type scale
• 你想整体放大或缩小一套设计比例
• 你明确知道第三方组件也会受影响

不适合：

• 老项目里同时混用了大量 px、em、固定宽高
• 你只想改某个局部模块
• 团队没有统一 token，改根字号会放大维护成本

用媒体查询按屏幕调根字号

html {
  font-size: 16px;
}

@media (min-width: 1280px) {
  html {
    font-size: 18px;
  }
}

这适合把整套文字和间距按断点一起缩放。但如果你只是想做响应式布局，很多场景直接用 clamp()、容器宽度或设计 token 会更稳。

62.5% 方案还能不能用

你会经常看到：

html {
  font-size: 62.5%;
}

因为 62.5% * 16px = 10px，于是 1.4rem = 14px、2.4rem = 24px，心算很方便。

这个方案不是错，但现在已经不再是默认推荐：

• 它的主要收益是“把 rem 映射回十进制 px”，本质是为了计算方便，不是为了语义更清晰。
• 设计系统成熟后，团队通常更依赖 token、spacing scale、组件约束，而不是手算 px。
• 如果项目里接入第三方组件或浏览器默认样式，统一降到 62.5% 有时会带来额外校对成本。

如果你是新项目，优先考虑这套顺序：

1. 先保持根字号接近浏览器默认值。
2. 用 rem 建立可缩放的排版和间距比例。
3. 需要精细响应式时，再通过 token、clamp() 或断点做局部控制。

局部改字号，不会改变 rem 的根

这点很容易混淆。

.sidebar {
  font-size: 14px;
}

.sidebar p {
  font-size: 1rem;
}

这里 .sidebar p 的 1rem 仍然看 html，不是看 .sidebar。如果你想让子元素相对父级缩放，应使用 em。

rem 适合什么，不适合什么

适合：

• 全站文字层级
• 间距、圆角、组件尺寸这种随整体缩放的设计 token
• 希望用户调整浏览器字体后，页面也跟着更可读

不太适合：

• 必须和位图像素严格对齐的细线或图像裁切
• 需要跟随局部容器字号变化的场景
• 已经明确由组件内部算法控制的尺寸

一个更稳的写法

如果你的项目已经有主题变量，不必先改 html 才能实现统一比例：

:root {
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

这样真正维护的是“设计标尺”，不是“16 换算成几”。Tailwind 项目也应优先用 theme token 和 spacing scale，相关做法见 Tailwind CSS 4 入门。

结论

• 1rem 常等于 16px，是因为浏览器默认根字号通常是 16px。
• rem 始终相对 html，不会因为某个父元素改了字号就改基准。
• 可以改根字号，但那是全局设计决策，不是单个样式技巧。
• 62.5% 方案能用，但不该为了心算方便强行套到所有项目。

如果你接下来要处理继承、默认值重置或 unset，继续看 CSS 继承与重置指南；如果你在调动画卡顿，下一步通常是理解 重排、重绘与图层性能。

参考资料

• MDN: CSS values and units