Root 字号与 px 转 rem

大多数 px → rem 的困惑，都来自忽略了 root 字号上下文。

默认心算模型

若：

html {
  font-size: 16px;
}

则：

px	rem
8px	0.5rem
16px	1rem
24px	1.5rem
32px	2rem

公式：

rem = px / rootFontSize

团队修改 root 时

有些项目会写：

html {
  font-size: 62.5%; /* 浏览器默认 16px 时常等价于 10px */
}

此时 1rem 可能是 10px 而非 16px。心算更方便（24px → 2.4rem），但若与按 16px 基准换算的值混用就会出错。

换算设计稿前，务必确认目标项目的 root 策略。

设计交付流程

1. 确认目标代码库的 root 字号。
2. 把间距与排版 px 转为 rem 令牌。
3. 若设计系统规定边框/阴影用 px，则保留 px。
4. 在 README 或 tokens 文件中记录基准。

令牌示例：

:root {
  --space-4: 1rem;    /* root 16px 时为 16px */
  --space-6: 1.5rem;  /* 24px */
  --text-lg: 1.125rem; /* 18px */
}

父级字号不同时引入 em

若组件设置了：

.callout {
  font-size: 0.875rem;
}

则 .callout 内的 1em padding 相对 0.875rem，而非 root。嵌套组件换算时，应在工具里设置 parent 字号。

常见错误

• 用错误的 root 基准做 px → rem
• 把 A 项目的 rem 值直接复制到 root 策略不同的 B 项目
• 本应用 em 跟随局部缩放的地方误用 rem

关键结论

px → rem 本质上是除法，但 必须先确定 root 字号。应把 root 字号当作换算输入的一部分，而不是事后补丁。

在 CSS 单位换算 / Clamp 生成器 的单位换算 Tab 中，先把 root 字号设为项目基准，再复制 rem 令牌。