直接用rem或vw会导致移动端间距失控，因其绑定根字体或视口尺寸，受系统字号、横竖屏、DPR影响；应改用--space-unit变量配合calc()解耦语义与单位，并统一在:root中响应式重设。
为什么直接用 rem 或 vw 控制移动端间距会失控
因为它们绑定根字体或视口尺寸，一旦用户开启系统“大号文字”、横竖屏切换、或DPR变化（比如iPhone 15 Pro Max的DPR=3），rem 会跟着放大导致按钮溢出容器，vw 在小屏上缩得太紧、大屏又撑太开。这不是单位不好，而是把“语义”和“单位”混在一起了——你本意是“中等间距”，结果写成了“1rem”，而1rem在不同设备下物理表现完全不同。
用 --space-unit + calc() 解耦语义与单位
核心是把“1份间距”定义为纯数字变量，单位锚点（如1px）留在calc()里显式声明，这样变量只表达倍数关系，不携带渲染副作用。
-
:root中定义：--space-unit: 4;（不是4px，也不是0.25rem） - 组件中调用：
padding: calc(var(--space-unit) * 1px) calc(var(--space-unit) * 2px); - 高DPI设备下
1px仍被渲染为1物理像素，清晰不模糊 - 后续整体放大25%，只需改
--space-unit: 5，无需动任何组件样式
响应式断点必须收口到 :root 变量重设，不能散落在组件里
每个组件都写@media (min-width: 768px) { margin: 16px; }，后期维护成本爆炸。正确做法是媒体查询只负责重置变量值，组件样式保持静态且可预测。
- 在
:root外层统一定义断点逻辑：@media (min-width: 768px) { :root { --space-unit: 6; } } - 避免嵌套媒体查询：不要在
.card里再写一遍@media去覆盖自己的padding - 如果项目需支持暗色模式或折叠屏，也可用
@media (prefers-color-scheme: dark)或@media (display-mode: standalone)叠加覆盖 - 注意：部分旧版Safari对
calc()内变量运算支持不全，建议最低兼容到iOS 14+
变量作用域失效的三个高频场景
CSS变量是级联的，但不是万能的。最常遇到的是伪元素、Shadow DOM 和 iframe 内容拿不到根变量，调试时容易误判为“变量没生效”。
立即学习“前端免费学习笔记（深入）”；
- 确保变量始终定义在
:root，而不是某个.wrapper选择器下 - 检查是否被
!important或内联style覆盖（DevTools里var(--space-md)显示为灰色即无效） - 在React/Vue中动态设置时，用
ref.current.style.setProperty('--space-unit', '5')，别直接操作document.documentElement，否则影响全局 - 伪元素如
::before默认继承父元素变量，但如果父元素没显式设置，它不会自动向上查到:root——加一句content: "";并确保父元素有var(--space-unit)引用，就能触发继承
实际重构时最难的不是写对语法，而是让设计系统里的“8px/12px/16px”严格对应到--space-xs/--space-sm/--space-md这些变量名，并约束整个团队不再手写margin: 12px。一旦放开口子，变量系统就退化成另一套魔法数字。
