CSS变量在媒体查询中无法全局覆盖:root值，因作用域限制；单位缺失或混用会导致calc()报错；IE11不支持变量需提供降级；推荐用比例缩放统一控制响应式间距。
媒体查询里不能直接覆盖 :root 中的变量
很多人写 @media (max-width: 768px) { :root { --gap: 8px; } }，以为能全局改掉间距变量——实际无效。CSS 变量的作用域是声明位置决定的，:root 在媒体查询里重新声明，只是创建了一个新作用域下的同名变量，只对该媒体查询内**显式匹配的选择器**生效，不会影响外层已渲染的元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把响应式变量写在媒体查询内部、具体组件选择器下，比如
.card或.layout - 确保使用
var(--gap)的元素也在同一媒体查询块中被选中（否则继承不到新值） - 避免跨媒体查询依赖“全局变量更新”，它不触发重计算
var() 在 calc() 里混用单位会报错
常见错误：定义 --gap: 12（无单位），然后写 margin: calc(1em + var(--gap))，浏览器报 Invalid property value——因为 var(--gap) 返回纯数字，无法与 1em 直接相加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 变量值统一存带单位的值，如
--gap: 12px，最省心也最直观 - 若想灵活缩放，改用比例因子：
--gap-scale: 0.75，再配合calc(1rem * var(--gap-scale)) - 别在
gap、grid-gap等简写属性里混用变量和固定值，例如gap: var(--gap) 2rem，单位不一致时整条声明可能失效
IE11 完全不支持变量，但媒体查询本身支持
即使你只在现代浏览器里用变量+媒体查询调间距，只要项目还兼容 IE11，所有含 var() 的声明都会被忽略——包括 margin: var(--gap)，结果是默认值（通常是 0），布局直接塌陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为关键间距属性提供降级：先写固定值，再用变量覆盖，如
margin: 16px; margin: var(--gap, 16px); - 不要依赖 JS 动态设置变量来驱动媒体查询响应——JS 改变量不会触发媒体查询重匹配
- 检查构建工具是否自动注入 CSS 变量 fallback（如 PostCSS 插件），但注意 fallback 无法还原动态逻辑
用比例缩放比硬编码多个单位更易维护
当需要在多个断点调整间距时，写 @media (max-width: 480px) { .card { --gap: 4px; } }、@media (max-width: 768px) { .card { --gap: 8px; } }……容易漏改、难同步。而用比例控制，逻辑更清晰，维护成本更低。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义一个缩放系数变量，如
--gap-scale: 1，并在媒体查询中只改这个系数 - 所有间距统一用
calc(1rem * var(--gap-scale))或calc(var(--base-unit) * var(--gap-scale)) - 把
--base-unit设为无单位数（如8），再用calc(var(--base-unit) * 1px)补单位，兼顾灵活性与安全性
真正麻烦的不是怎么写，而是变量作用域和单位处理这两个点——它们不报错，但会让样式在某些断点“看起来正常、实际没生效”。
