不够。单纯用em/rem会导致视口缩放或根字体变化时间距意外缩放，应改用CSS变量配合calc()做断点内插值，如--spacing-sm设为无单位数值4，再用calc(var(--spacing-sm) * 1px)调用。
响应式间距用 em 或 rem 就够了吗？
不够。单纯依赖 em/rem 会在视口缩放或根字体变化时意外放大/缩小间距，尤其在移动端横竖屏切换时，margin 可能突然变大导致布局错位。真正可控的是用 CSS 变量配合 calc() 做断点内插值。
- 别把
--spacing-sm直接设成0.5rem—— 这样它就和font-size绑死了 - 应该设为无单位数值（如
4），再在用到的地方乘以基准单位：margin: calc(var(--spacing-sm) * 1px) - 这样后续只需改一个
:root里的font-size或媒体查询中的变量值，所有间距同步响应
怎么用媒体查询 + CSS 变量分层控制间距？
关键不是写一堆 @media 覆盖同一个属性，而是把断点逻辑收口到变量定义里，让组件样式保持干净。比如一个卡片的内边距，在小屏用紧凑值，大屏自动宽松，中间平滑过渡。
- 在
:root定义基础变量：--space-unit: 4px - 用媒体查询重设变量值：
@media (min-width: 768px) { :root { --space-unit: 6px; } } - 组件中统一用：
padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) - 避免在每个组件里重复写
@media—— 那会失控，也难维护
margin 负值 + CSS 变量会触发重排吗？
不会直接触发，但若负值导致元素尺寸或位置发生不可预测变化（比如父容器高度塌陷、兄弟元素重叠后又因内容撑开），浏览器仍会重排。更危险的是：用变量控制负 margin 时，如果没配好断点节奏，小屏下负值过大可能把元素挤出视口且无法滚动。
- 负
margin只建议用于微调对齐（如抵消外边距合并），别用来“隐藏”或“位移主体内容” - 如果必须动态负值，确保它始终在安全范围内：
--margin-shift: clamp(-8px, var(--space-unit) * -1, 0) - Chrome DevTools 的 Layout Shift Regions 能直观看到哪些负值正在造成 CLS（累积布局偏移）
为什么 padding 比 margin 更适合用变量驱动？
padding 不影响文档流，也不触发外边距合并，变量变更后视觉反馈稳定；而 margin 在父子、兄弟间有隐式交互，同一变量在不同上下文会产生不同效果。
- 例如
--gap: 12px用在padding上，永远是“内部留白”；用在margin上，可能在 Flex 容器里被忽略（需配合gap属性） - Grid 布局中优先用原生
gap，而不是给子项加margin—— 后者会破坏justify-content行为 - 如果要兼容老浏览器（IE11），
padding+ 变量 fallback 更可靠：padding: 12px; padding: calc(var(--space-unit) * 3)
实际项目里最容易被忽略的，是变量命名和作用域粒度——--spacing-xs 和 --card-padding-y 看似都管间距，但前者是设计系统级原子变量，后者是组件级语义变量，混用会导致改一个值，整个页面的卡片和按钮同时抽搐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
