应使用响应式css变量（如clamp()）替代px/rem硬编码间距，通过语义化变量名和媒体查询动态赋值，兼顾维护性与多端适配，同时注意浏览器兼容性回退。
为什么直接用 px 或 rem 写死间距会失控
改一个 16px 间距，得翻遍所有 .card-padding、.list-item-gap、section > * + * 选择器；更糟的是，移动端需要紧凑些（8px），桌面端要舒展（24px），硬编码只能靠媒体查询层层覆盖，维护成本指数级上升。
用 --spacing-sm 等变量统一定义，但别在 :root 里写死值
把基础间距抽成带语义的变量是必须的，但关键在「怎么赋值」：直接写 --spacing-sm: 0.5rem 仍只是静态值。真正高效的做法是让变量本身响应视口变化——比如用 clamp()：
html
:root {
--spacing-xs: clamp(4px, 0.25vw, 8px);
--spacing-sm: clamp(8px, 0.5vw, 12px);
--spacing-md: clamp(16px, 0.8vw, 24px);
}
-
clamp()的首选值必须含视口单位（vw），否则无法插值；最小/最大值单位要一致（全用px或全用rem） - 别用
calc(1rem + 0.3vw)替代clamp()——它不设上下限，小屏可能缩到看不见，大屏可能撑爆容器 - 这些变量可直接用于
padding、margin、gap，但别塞进border-width或z-index这类非线性场景
如何让同一套变量在不同断点下自动切换逻辑
CSS 变量本身不感知断点，但你可以用媒体查询「重定义」变量值，实现「一套命名、多套规则」：
css
:root {
--spacing-md: 16px;
}
<p>@media (min-width: 768px) {
:root { --spacing-md: 20px; }
}</p><p>@media (min-width: 1024px) {
:root { --spacing-md: 24px; }
}</p>
- 这种写法兼容所有现代浏览器，包括 Safari 15.4+（
@media (min-width: var(--bp-md))还不稳，别冒险） - 变量名保持不变，组件样式无需修改，例如
padding: var(--spacing-md)在任何断点都生效 - 若需 JS 动态读取当前值，用
getComputedStyle(document.documentElement).getPropertyValue('--spacing-md')，返回的是已计算后的像素字符串，记得手动解析单位
和 Bootstrap / Tailwind 的 --bs-gutter-x 或 space-y-4 混用要注意什么
你完全可以保留框架的栅格间距变量，同时用自定义变量控制组件内间距——但必须分清层级：
-
--bs-gutter-x控制的是.row和.col之间的间隙，别拿它去调按钮内边距；该用--spacing-sm的地方就用它 - Tailwind 的
space-y-4编译后是固定值（margin-top: 1rem），无法响应式；想让它变，得自己写.space-y-clamp { margin-top: var(--spacing-sm); } - 如果项目里既有 Sass 编译流程，又用 CSS 变量，避免重复定义：Sass 里只管全局基值（如
$spacing-unit: 0.5rem），CSS 变量负责运行时响应逻辑
最易被忽略的一点：gap 属性本身支持 clamp()，但旧版 Safari 对 gap + clamp() 组合支持不稳定，生产环境务必加回退——比如先写 gap: 16px，再写 gap: clamp(12px, 0.6vw, 20px)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
