设计稿标注 24px，代码库全用 rem——这个场景你一定遇到过。打开计算器，除以 16，写进代码，一小时后再来一遍。这种低价值重复劳动不应该占用开发者的时间。
CSS 单位速览
理解各单位的本质，才能做出正确的技术选型。
px — 绝对像素
最直观的单位，font-size: 16px 就是 16 个 CSS 像素。注意：CSS 像素不等于物理像素——在 Retina 屏幕上，1 个 CSS 像素对应 2 个（或更多）物理像素。
适用场景：边框（border: 1px solid）、阴影、不应随用户字体设置缩放的元素。
rem — 根元素 em
1rem 等于根元素 <html> 的字体大小，默认 16px。用户在浏览器里调大字体，基于 rem 的布局会等比缩放，天然支持无障碍访问。
html { font-size: 16px; } /* 默认基准 */
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */适用场景：字体大小、间距、布局尺寸——所有需要跟随用户字体偏好的属性。
em — 父元素 em
1em 等于当前元素父级的字体大小。嵌套会叠加：父级 1.5em，子级再 1.5em，实际变成 2.25rem。这个特性用好了灵活，用错了难以排查。
.card { font-size: 1.25em; } /* 父级 16px → 20px */
.card .caption { font-size: 0.8em; } /* 0.8 × 20 = 16px */适用场景：组件内部间距（如按钮 padding），需要随组件字体大小联动缩放时。
vw / vh — 视口单位
1vw = 视口宽度的 1%，1vh = 视口高度的 1%。适合全屏布局、流体排版。
.hero { height: 100vh; }
.headline { font-size: 5vw; }注意：iOS Safari 的动态工具栏会导致 100vh 行为异常。移动端推荐使用 dvh（动态视口高度）。
单位换算公式
px → rem
rem = px ÷ 根字体大小默认基准 16px 的换算表：
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 16 | 1 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
rem → px
px = rem × 根字体大小px → vw
vw = (px ÷ 视口宽度) × 100以 1440px 设计稿为例，240px 元素 = 240 ÷ 1440 × 100 = 16.67vw。
在线 CSS 单位转换器
输入任意单位的值（px、rem、em、vw、vh、pt、cm、mm），立即获得所有其他单位的等价值。可自定义根字体大小和视口尺寸，适配你的实际项目。
所有计算在浏览器本地完成，不上传数据。
实战场景
设计稿交付
Figma 默认使用 px 标注，你的设计系统用 rem token。用转换器批量换算整个间距系统，而不是一个个手算。
无障碍审查
把浏览器字体大小调到 20px，检查哪些元素没有自适应——用 px 硬编码的尺寸会”原地不动”，那就是你的改造清单。
clamp() 响应式排版
font-size: clamp(1rem, 2.5vw, 2rem);想在 800px 视口下字体正好是 20px？计算 20 ÷ 800 × 100 = 2.5vw。转换器秒出结果。
rem vs em 选型速查
| 场景 | 单位 |
|---|---|
| 正文字体 | rem |
| 标题 | rem |
| 按钮 padding（跟按钮字体联动） | em |
| 全局间距系统 | rem |
| 媒体查询断点 | em（兼容浏览器缩放） |
媒体查询用 em 有个微妙原因：它响应浏览器基础字体大小，而不是 <html> 的 font-size，这在用户使用浏览器缩放时有区别。
用 CSS 变量构建可扩展间距系统
最佳实践是用 CSS 变量定义基于 rem 的间距系统：
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
}只需修改 html { font-size }，整套间距系统等比缩放。CSS 单位转换器帮你把设计稿的 px 值快速转换为 rem token。
小结
- rem：字体和全局间距，尊重用户无障碍设置
- em：组件内间距，与组件字体联动缩放
- vw/vh：视口相对布局和流体排版
- px：边框、阴影等不需要缩放的细节