约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证
先给结论：一张单位决策表
CSS 单位没有「最好的一个」，只有「用对场景」。下面这张表覆盖 95% 的日常决策，记住它比背单位定义有用得多：单位的本质是「相对谁缩放」。
| 场景 | 推荐单位 | 理由 |
|---|---|---|
| 正文字号、标题、间距 | rem | 只跟根字号缩放：用户调大浏览器字号时全站跟随，无障碍友好 |
| 组件内部的相对尺寸（图标对齐文字等） | em | 跟元素自身字号缩放，组件放大时内部同步放大 |
| 横幅高度、大区块宽度 | vw / vh / min()、max() | 跟随视口，天生流式 |
| 1px 边框、box-shadow 偏移 | px | 需要物理像素级精确，缩放反而模糊 |
| 媒体查询断点 | em 或 px | 与浏览器默认字号解耦，行为更稳定 |
| 打印样式 | pt / cm / in | 物理单位，纸张友好 |
rem 与 em 的唯一区别：相对谁
rem 的 r 是 root——1rem 永远等于 html 的 font-size，和元素在哪、嵌套多深无关。em 相对的是「元素自身的 font-size」，用在 font-size 上时相对父级，用在 padding、width 上时相对自身——这条规则是 90% 的 em 事故来源：嵌套两层 em 就会叠加出难以预料的值。所以布局间距一律 rem，只有「组件内部希望跟着组件字号走」的场合才用 em。
.parent { font-size: 1.2em; } /* 假设父级 16px → 19.2px */
.child { font-size: 1.2em; } /* 相对 19.2px → 23.04px，不是 19.2 */.parent { font-size: 1.2rem; } /* 恒等于 1.2 × 16 = 19.2px */
.child { font-size: 1.2rem; } /* 仍是 19.2px */px 转 rem：换算公式与速查表
换算只有一条公式：rem 值 = px 值 ÷ 根字号。根字号是 16 时，24px 就是 1.5rem。把设计稿的常用值换算一遍贴在手边，或直接用站内的 px/rem 换算工具改任何基准实时重算。
| px（基准 16） | rem | 典型用途 |
|---|---|---|
| 12px | 0.75rem | 辅助说明、时间戳 |
| 14px | 0.875rem | 次要正文、表单标签 |
| 16px | 1rem | 正文基准 |
| 18px | 1.125rem | 强调正文 |
| 20px | 1.25rem | 小标题 |
| 24px | 1.5rem | 卡片标题 |
| 32px | 2rem | 区块标题 |
html { font-size: 62.5% }：好用但有代价
62.5% 方案把根字号设为 10px，让 1rem = 10px，换算心算零负担（24px 直接写 2.4rem）。代价有二：一是团队里所有人以及所有第三方样式都要遵守同一约定，混入没按此写的组件库就会错位；二是根字号 10px 时，em 相对值的叠加更容易产生过小的值。采用与否不重要，全项目一致才重要。无论哪种基准，换算工具里把基准改成 10 即可无缝适配。
为什么不要用纯 vw 排版
vw 只看视口宽度，用户把浏览器默认字号从 16 调到 24 也丝毫不影响它——对依赖放大功能的低视力用户是实打实的伤害。流式排版的正确姿势是 rem + vw 混合：vw 项负责随窗口缩放，rem 项保留用户字号的影响。clamp() 把最小最大值钳住，就是这套方案的现成容器。
h1 { font-size: 3vw; } /* 窗口 1200px 时 36px，用户字号设置被无视 */h1 { font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem); }
/* 360px 起 20px，1200px 到 36px，区间外钳住；用户字号设置仍然生效 */自查清单
- 全站搜索 font-size: —— 出现 em 的每一处，确认它真的是想跟自身字号缩放
- 间距、字号、圆角统一 rem；边框、阴影偏移、1px 细节保留 px
- 媒体查询断点与根字号方案解耦，避免改基准后断点漂移
- 流式排版用 clamp(rem, rem + vw, rem)，不要裸 vw
- 换算后抽查一两处渲染值，确认基准字号和设计稿一致
常见问题
1rem 到底等于多少 px？
取决于 html 的 font-size：浏览器默认 16px，但项目可能改成 10px（62.5% 方案）或其他值。用「查看元素」看 html 的 computed font-size，或在换算工具里把基准改成实际值即可。
em 和 rem 我该记哪个？
记 rem 就够 90% 的场景：它只跟根字号走，行为可预测。em 只在「组件内部希望随自身字号缩放」时使用，且要小心嵌套叠加。
为什么我的 rem 适配在手机上偏大或偏小？
多半是根字号跟着视口变了（比如 html { font-size: 4vw } 一类方案）。rem 本身没变，是基准在动；要流式缩放请显式用 clamp() + vw，根字号保持固定，行为才可预测。