什么是 CSS 单位

CSS 长度值总是带有一个 单位（或 auto 等特殊关键字）。单位告诉浏览器：这个数字是相对于什么来计算的。

示例：

.card {
  padding: 16px;
  font-size: 1rem;
  width: 50%;
  gap: 2vw;
}

上面每个值最终都会在布局引擎里换算成像素尺寸，但 参考系 不同。

开发者最常用的三类单位

类别	示例	相对对象
绝对单位	px	设备像素（CSS px）
字体相对	rem、em、%	Root 或父级字号
视口相对	vw、vh	视口宽或高

生产环境里的 CSS 通常会混用这三类，这很正常。

单位在真实项目里为什么重要

单位不只是语法，还会影响：

• 可访问性：以 rem 为主的排版比到处写死 px 更容易尊重用户浏览器字号设置。
• 设计交付：设计稿常用 px，组件库却常用 rem 令牌。
• 响应式行为：vw 和 clamp() 可以随视口缩放，而不必为每一步都写 media query。
• 组件嵌套：em 和 % 依赖父级上下文，嵌套组件里容易踩坑。

单位 vs 媒体查询

Media query 在断点处切换规则；相对单位与 clamp() 则根据上下文连续计算尺寸。

两者都能解决响应式问题，但回答的问题不同：

• Media query：「在这个断点应用另一套规则。」
• rem/em/vw/clamp：「根据上下文计算尺寸。」

关键结论

换算设计值之前，先问：「这个尺寸是相对于什么的？」 px 相对屏幕，rem 相对 root，em 相对父级，vw 相对视口，% 相对包含块。

可以用 CSS 单位换算 / Clamp 生成器 输入 16px，观察同一数值在上下文变化时如何变成不同的 rem、em 和 vw。