用 rem 搭配根元素 font-size 是最可控、最易维护的统一字号方案，因 *{font-size:16px} 会破坏相对单位继承、绕过系统缩放、干扰移动端渲染，而 html{font-size} + rem 可保障可访问性、响应式与缩放一致性。
直接用 rem 搭配根元素 font-size 是最可控、最易维护的统一字号层级方案，其他方式（比如 * 选择器 + px）看似简单，实则破坏可访问性、响应式和缩放行为。
为什么不能用 * { font-size: 16px; }
这个写法表面上“统一”了所有元素字号，但实际埋了三个坑：
-
em、rem、%等相对单位全部失效——因为它们依赖继承链或根字号，而*强行重置了每个元素的基准，导致h2 { font-size: 1.5em; }不再是父元素的 1.5 倍，而是固定 1.5 × 16px，失去层级弹性 - 用户系统级字体缩放（如 Windows 的“放大文本”或 macOS 的辅助功能设置）被绕过，页面文字无法随系统偏好调整
- 移动端 viewport 缩放、iOS Safari 的自动字号修正机制会与该规则冲突，部分段落可能意外变小或模糊
正确做法：只设一次 html 的 font-size
把字号层级的“源头”控制在 html 元素上，其余所有字号都用 rem 表达：
html {
font-size: 16px; /* 基准值，也可用 100% 或 1rem */
}
<p>/<em> 后续全部基于此计算 </em>/
h1 { font-size: 2.5rem; } /<em> = 40px </em>/
p { font-size: 1rem; } /<em> = 16px </em>/
small { font-size: 0.875rem; } /<em> = 14px </em>/</p>
这样做的好处是：
- 所有
rem值严格对应根字号，层级关系清晰可推算 - 用户修改浏览器默认字号（如设为 20px），整个页面同比例放大，无障碍支持到位
- 配合媒体查询可轻松做响应式调整：
@media (max-width: 768px) { html { font-size: 14px; } }
需要动态适配视口时，慎用 vw 单位
有人用 html { font-size: clamp(14px, 2.5vw, 18px); } 实现流体字号，这确实能随屏幕宽度变化，但要注意：
- 小屏下
2.5vw可能低于 12px，触发浏览器最小字号限制（多数浏览器强制不低于 12px），导致实际显示比预期大 - 滚动时视口宽度微变可能引发字号跳变，尤其在 iOS Safari 中容易造成重排闪烁
- 如果页面含固定高度容器（如
height: 40px;），字号缩得太小会导致文字溢出或截断，需额外加line-height和overflow控制
工具类框架（如 Tailwind）里的 text- 类本质也是 rem
像 text-base、text-xl 这些类，背后仍是基于根字号的 rem 计算：
.text-base { font-size: 1rem; }
.text-xl { font-size: 1.25rem; } /* 默认 20px（若 root=16px）*/
如果你项目用了这类框架，就别再手动写 html { font-size: ... } —— 直接查文档确认其 theme.fontSize 配置，改那里即可。强行覆盖根字号反而会让工具类失效或错位。
真正要统一字号层级，核心不是“让所有元素看起来一样大”，而是建立一套可预测、可缩放、可响应的计算体系。根字号 + rem 就是目前最稳的那条路，其他都是妥协或特例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
