px、rem 与 em

这三个单位几乎出现在每个前端代码库里。小示例里它们看起来可以互换，但在真实组件中行为不同。

px：设计交付的默认单位

px 是绝对 CSS 单位。16px 就是十六个 CSS 像素，与父级字号无关。

适合使用 px 的场景：

• 固定边框、阴影或 1px 分割线
• Canvas、SVG 描边宽度或像素级资源
• 设计系统尚未定义 rem 令牌时的一次性规格

如果设计系统期望 rem 缩放，就不要把所有排版都写死成 px。

rem：相对 root 元素

1rem 等于根元素（html）的计算字号，默认通常是 16px。

html {
  font-size: 16px;
}

.title {
  font-size: 1.5rem; /* 24px */
}

适合使用 rem 的场景：

• 构建字号、间距、圆角等设计令牌
• 项目可能调整 root 字号，希望尺寸随之缩放
• 需要在互不相关的组件间保持一致

em：相对当前元素字号

1em 等于当前元素的计算字号（某些属性如 padding 还会受父级影响）。

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

这里 padding 会随按钮字号自动缩放。

适合使用 em 的场景：

• 组件内部间距应跟随局部排版
• 图标或徽章需要与附近文字同比例缩放
• 你确实需要嵌套缩放行为

快速对比

单位	更适合	注意点
px	边框、精确资源	不随 root 设置缩放
rem	全局令牌、排版	依赖稳定的 root 字号
em	组件内部节奏	深层嵌套会叠加放大

常见错误：混用上下文

设计师给 20px 正文，你在 CSS 里写 20px。后来团队改成 html { font-size: 62.5%; } 方便心算 rem，你的 px 值就与 rem 令牌对不上了。

更好的流程：一次性把 px 转成 rem，沉淀为令牌并复用。

关键结论

px 用于固定物理细节，rem 用于系统级令牌，em 用于应跟随局部文字的尺寸。

用 CSS 单位换算 / Clamp 生成器 把设计 px 转成 rem，复制前先设置与项目一致的 root 字号。