CSS变量--gap需在:root中用媒体查询重声明才能响应式生效，不能仅在选择器内修改gap值；推荐用rem单位并固定根字体大小；IE11不支持gap和CSS变量，需用margin模拟或放弃兼容。
gap 在媒体查询里直接改不生效？
因为 gap 是布局属性，但它的值不能在媒体查询中“动态重写”变量定义——你改的是变量的使用处，不是变量本身。CSS 变量（--gap-sm）必须在 :root 或对应作用域里被重新声明，媒体查询里只负责“重新赋值”，不是“重新定义”。
- 错误写法：
@media (min-width: 768px) { .grid { gap: var(--gap-md); } }—— 这没问题，但没用到变量赋值逻辑 - 正确路径：先在 :root 定义变量，再在媒体查询里用
:root选择器覆盖它 - 别漏掉
!important—— 它对 CSS 变量无效，加了也没用
怎么用 :root + 媒体查询安全更新 --gap
核心是把变量声明和响应式重置放在同一层级（:root），靠媒体查询“切换”变量值。浏览器按顺序解析，后声明的同名变量会覆盖前面的。
:root {
--gap: 0.5rem;
}
<p>@media (min-width: 768px) {
:root {
--gap: 1rem;
}
}</p><p>@media (min-width: 1024px) {
:root {
--gap: 1.5rem;
}
}</p><p>.grid {
display: grid;
gap: var(--gap);
}- 必须用
:root，不能用.grid或其他类去重设变量——否则作用域受限，子元素拿不到新值 - 所有媒体查询要写在变量使用前（即
.grid规则之前），否则可能因 CSS 加载顺序导致初始渲染用错值 - 移动端优先，从最小断点开始写，避免覆盖遗漏
gap 值设成 em / rem 会影响响应行为吗？
会影响，但不是你想的“自动适配”。rem 依赖根字体大小，如果 html 的 font-size 本身也响应式变化，那 --gap 的实际像素值就会叠加响应逻辑——容易失控。
- 推荐统一用
rem，但固定根字号（如html { font-size: 16px; }），让--gap可预测 - 避免混用
em：它相对父元素字体大小，网格容器通常无字体设置，em 行为难调试 - 绝对单位（
px）最稳，但牺牲缩放友好性；rem是平衡点
IE 不支持 gap 和 CSS 变量？怎么办
IE11 完全不支持 gap，也不支持 CSS 变量，所以这套方案在 IE 下直接失效。没有“优雅降级”的 gap，只有替代方案。
立即学习“前端免费学习笔记（深入）”；
- 用
margin模拟 gap：给每个 grid item 设置margin，再用margin-left/margin-top负边距抵消首列/首行，复杂且易错 - 放弃 IE：现在绝大多数项目已不保 IE，明确在构建流程中标记
/* no IE support */ - 如果必须兼容，用 PostCSS 插件（如
postcss-gap-properties）转译 gap 为 margin 方案，但变量部分仍需手动 fallback
真正麻烦的不是写法，而是当设计稿要求“间距随屏幕线性增长”时，纯 CSS 变量 + 媒体查询只能做断点切换，没法实现连续缩放——这时候得上 JS 计算或 clamp()，但那就超出 gap 本身了。
