rem、em 与 px

对比 px/em/rem 的参照基准与工程选型，说明无障碍缩放与组件局部缩放场景。

#type / concept #status / growing #tech / dev / frontend #resource / css

[!info] 关联笔记

所属：响应式与视觉 MOC

相关：单位与响应式尺寸 · 响应式布局

rem、em 与 px

这个概念为什么出现

字号、间距、断点若全写死 px，用户放大根字号时版面可能“看似放大却溢出”；全用 em 又容易嵌套复合放大。需要按参照基准选型。

[!abstract] 一句话理解 px 是绝对 CSS 像素；em 相对当前元素字号；rem 相对根元素字号。

最小示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    html { font-size: 16px; }
    .nav { font-size: 1.25rem; }      /* 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>

结合场景关注点

em 会嵌套相乘；rem 更稳。
组件内部可用 em 做“随组件字号缩放”。
根字号策略影响整站 rem。

选型建议

场景	倾向
边框、1px 线	px
全局间距体系	rem
组件内随字号 padding	em
媒体查询	项目约定（px/em/rem 皆有流派）

常见误区

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

本节总结

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

自测题

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

参考答案

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

延伸阅读

资料	类型	支撑内容
MDN CSS values	文档	单位