应使用带断点前缀的 CSS 变量（如 --spacing-xs）统一管理响应式间距，在各媒体查询内重新赋值以实现精准控制，避免用 clamp() 破坏设计节奏，同时注意 SSR 和构建工具对变量的支持问题。
用 --spacing-xs 这类变量统一管理响应式间距
直接定义一套带断点前缀的 CSS 变量，比在每个选择器里写 @media 更可控。变量本身不生效，但能被 calc()、var() 和媒体查询联动调用。
常见错误是把变量定义在 :root 里就以为万事大吉——结果小屏下 --spacing-md 还是 16px，根本没变。
- 必须在不同媒体查询内重新赋值同一变量，比如
@media (max-width: 768px) { :root { --spacing-md: 12px; } } - 变量名建议带语义和尺寸层级，如
--spacing-xs、--spacing-sm、--spacing-lg，别用--gap-1这种无上下文编号 - 避免在变量值里写
em或rem—— 它们会继承父级计算，导致响应行为不可预测；统一用px或rem（如果全站已锁定根字号）
margin 和 padding 别硬写死数值，改用 var(--spacing-md)
写死 margin: 16px 看似简单，一旦要适配折叠屏或高DPI设备，就得全局搜替换。而用变量后，只需改一处定义，所有引用自动更新。
典型场景：卡片列表在桌面端需要大呼吸感，在手机上得紧凑些。这时不是给 .card 单独加媒体查询，而是让它的 margin-bottom 始终绑定 var(--spacing-lg)，再通过媒体查询调整该变量值。
立即学习“前端免费学习笔记（深入）”；
- 所有涉及空白的属性（
margin、padding、gap、border-radius）都应优先走变量 - 慎用
var(--spacing-md) 0这种简写——CSS 不支持部分替换，必须写全var(--spacing-md) 0 var(--spacing-md) 0或用margin-block/margin-inline -
gap在 Flex/Grid 中可直接接变量，但老版本 Safari 对gap+ CSS 变量组合支持不稳定，必要时加回退值：gap: 16px; gap: var(--spacing-md);
为什么不用 clamp() 替代媒体查询变量？
clamp(8px, 4vw, 16px) 看似智能，但实际会让间距随视口连续变化，破坏设计系统的节奏感。设计师给的“移动端 8px、平板 12px、桌面 16px”是离散断点，不是平滑过渡曲线。
更麻烦的是，clamp() 的中间值（如 4vw）在折叠屏展开前后可能跳变，且无法和设计系统其他常量（如字体大小、圆角）对齐步调。
-
clamp()适合字体大小这类需兼顾可读性与空间效率的场景，不适合间距这种强调一致性的基础度量 - 若真要用
clamp()，中间值别用纯vw，改用min(max(8px, 4vw), 16px)思路并测试折叠/旋转临界点 - 所有主流设计系统（Material、Apple HIG、Ant Design）的响应式间距方案都基于断点+静态值，不是流体计算
变量作用域和 SSR/构建时注入的坑
服务端渲染（SSR）或静态生成（如 Next.js、Nuxt）中，:root 的媒体查询不会在服务端触发，导致首屏渲染时变量还是桌面值，闪一下才变小屏——这不是 CSS 问题，是执行时机问题。
另一个坑是 PostCSS 插件（如 postcss-custom-properties）默认会把变量“编译掉”，把 var(--spacing-md) 直接替换成 16px，彻底废掉响应能力。
- 确保构建工具禁用 CSS 变量降级（尤其在使用 Tailwind 时，
content配置漏掉某些文件会导致变量未被识别） - SSR 场景下，可用
window.matchMedia在客户端首次加载时手动 setStyle，或用useEffect+useState控制 class 切换（如theme-mobile）来隔离变量作用域 - 不要在 JS 里用
getComputedStyle读取变量值做逻辑判断——它返回字符串，且无法感知媒体查询动态变化，容易误判
最易被忽略的一点：CSS 变量的继承是运行时的，不是声明时的。你在 @media 里改 :root，所有已存在的元素会立刻重绘，但如果有 JS 正在读取 offsetHeight 并依赖旧间距做计算，就可能出错。这类耦合点很难排查，得提前在布局关键路径上留余量。
