CSS 单位调试流程

CSS 单位问题常表现为「差不多对」的布局：移动端文字略大、间距与 Figma 有偏差，或 clamp 永远到不了预期的最大值。

合并样式变更前，可以用一套短流程做验证。

第一步：确认上下文

写下当前假设：

• Root 字号（html）
• 嵌套组件的 parent 字号
• 设计评审使用的视口宽/高
• 规格用的是 px、rem 还是混合单位

任一假设错误，后续换算都会偏。

第二步：选定单一真相源再 outward 换算

选一个规范输入（通常是设计 px），再向外换算：

24px @ 16px root → 1.5rem
24px @ 1440px 视口 → 1.6667vw

把 rem 令牌放进 :root 或设计系统文件，而不是在每个组件里临时心算。

第三步：在三个视口宽度预览 clamp

Fluid 值至少检查：

• 最小视口（如 320px）
• 中间视口（如 768px）
• 最大视口（如 1280px）

自问：

• 最小宽度下文字是否仍可读？
• 间距是否在不超过容器的情况下达到预期上限？
• 曲线是否平滑，而非突变？

第四步：在浏览器中与设计稿对比

DevTools 的计算样式会显示 rem、clamp 最终换算成的 px。在相同视口宽度下与设计规格对比。

若计算 px 不一致，先修正上下文（root、parent、viewport），而不是随意加减偏移。

常见症状对照

现象	可能原因
rem 整体偏大	root 字号假设错误
嵌套文字 em padding 爆炸	父级字号层层叠加
移动端 vw 文字过小	clamp 缺少最小值
% 宽度塌缩	父级没有明确宽度
clamp 达不到 max	viewport max 设得过高

何时用其他工具

• 颜色令牌：用颜色转换工具统一 HEX/RGB/HSL
• 布局断点：结构变化仍用 media query 或 container query
• 视觉验收：浏览器设备模式做最终检查

单位换算工具解决的是 数值参考系，不能替代布局调试。

关键结论

把 CSS 单位当作带类型的数据：每个值都携带上下文。确认上下文 → 从单一真相源换算 → 预览 clamp 边界 → 在浏览器验证计算 px。

下次写组件时，可先用 CSS 单位换算 / Clamp 生成器 跑一遍这套流程，再开 PR。