[!info] Related notes

• 所属：响应式与视觉 MOC
• 相关：单位与响应式尺寸 · 响应式布局

rem、em 与 px

这个概念为什么出现

字号、间距与断点的参照量不同。用户调整默认字体或页面缩放时，需要检查这些尺寸是否仍配合；嵌套设置 em 字号也可能逐层放大。选型前应先明确参照基准。

[!abstract] 一句话理解 px 是 CSS 长度单位，不等于设备物理像素；em 用在 font-size 上参照父字号，用在 padding 等属性上参照自身字号；rem 通常参照根元素字号。

最小示例

场景：侧栏导航字号与间距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    html { font-size: 100%; }         /* 保留浏览器默认字号设置 */
    .nav { font-size: 1.25rem; }      /* 默认根字号为 16px 时：20px */
    .nav .item {
      font-size: 0.9em;               /* 相对 .nav → 18px */
      padding: 0.5em 0.75em;          /* 随自身字号 */
      margin-bottom: 0.5rem;          /* 随根字号，不嵌套放大 */
    }
  </style>
</head>
<body>
  <nav class="nav">
    <div class="item">入库</div>
    <div class="item">出库</div>
  </nav>
</body>
</html>

结合场景关注点

1. 嵌套元素重复设置 em 字号时会逐层相乘；仅继承同一字号、使用 em padding 不会自动层层放大。
2. 组件内部可用 em 做“随组件字号缩放”。
3. 根字号策略影响整站 rem。

选型建议

场景	倾向
边框、1px 线	px
全局间距体系	rem
组件内随字号 padding	em
媒体查询	em/rem 参照浏览器初始字号，不是页面 html 上设置的字号；与常规属性中的 rem 区分

字号、缩放与查询边界

• CSS px 是参考像素；页面缩放也会放大 px 内容，不能把 px 等同于“无法无障碍缩放”。
• rem 不会自动保证可访问性。若把 html 字号固定成 px，它不会自动跟随用户修改默认字体大小；还需检查放大后的换行、溢出与可操作性。
• 在根元素自身的 font-size 中，em/rem 都相对初始字号，避免自引用。
• 媒体查询里的字体相对单位依据初始字号计算；修改 html { font-size: 32px } 不会把 @media (min-width: 60rem) 的阈值翻倍。

常见误区

[!warning] 常见误区：em 总是相对父元素 对 font-size，em 相对父字号；对 padding 等，em 相对元素自己的 font-size（计算顺序要注意）。

浏览器核对：默认根字号 16px 时，示例 item 字号 18px、上内边距 9px、下外边距 8px；把根字号改为 32px 后分别为 36px、18px、16px。在同一 1280px 视口，60em/60rem 媒体查询的匹配结果未随根字号修改而改变。

本节总结

单位选择是设计系统与无障碍的一部分，不是审美偏好。

自测题

1. 父 20px，子 font-size:0.5em; padding:1em，padding 是多少？

参考答案

子字号 10px，padding 1em=10px。

延伸阅读

资料	类型	支撑内容
MDN CSS values	文档	单位
CSS Values — Font-relative lengths	规范	em/rem 与根元素例外
Media Queries — Units	规范	查询中的字体相对单位