CSS变量不能用于@media条件，因其计算时机晚于媒体查询解析，语法也禁止；正确做法是在媒体查询内定义变量以覆盖根变量。
CSS变量不能直接用在媒体查询条件里，比如 @media (min-width: var(--breakpoint)) 是非法语法，浏览器会忽略整条规则。
为什么CSS变量不能放进@media条件里
CSS变量的计算发生在样式层叠和继承之后，而媒体查询的解析是CSS引擎最早执行的阶段之一。两者作用时机不重合，语法上也明确禁止变量出现在媒体特性值位置。
常见错误现象包括：
- 写完
@media (min-width: var(--sm)) { ... }后样式完全不生效，控制台无报错但 DevTools 里该规则被标灰 - 误以为变量能“动态响应”视口变化，实际只是静态 fallback（比如变量未定义时用 0）
- 把变量当 JS 变量用，期待它随
window.innerWidth实时更新媒体查询匹配状态 - 基础层定义默认值：
:root { --font-scale: 1.2; --spacing-unit: 0.5rem; } - 平板断点放大字体：
@media (min-width: 768px) { :root { --font-scale: 1.25; } } - 桌面端增加留白：
@media (min-width: 1024px) { :root { --spacing-unit: 0.75rem; } }
正确用法：变量定义在媒体查询内部
你可以在 @media 块里声明或修改 CSS 变量，这样变量值就只对匹配该断点的样式生效。
立即学习“前端免费学习笔记（深入）”；
典型场景是统一调整字号比例、行高或间距基线：
注意：这些变量必须在后续选择器中通过 var(--font-scale) 调用才起作用，不能反过来驱动媒体查询本身。
移动端优先 + 单向 min-width 的组合更可靠
把基础样式（手机）写在 :root 外部，再用递增的 min-width 覆盖，避免断点重叠或遗漏。例如：
:root {
--font-body: 1rem;
--grid-gap: 0.5rem;
}
@media (min-width: 768px) {
:root {
--font-body: 1.125rem;
--grid-gap: 0.75rem;
}
}
@media (min-width: 1024px) {
:root {
--font-body: 1.25rem;
--grid-gap: 1rem;
}
}
这种写法的好处：
- 无需维护多套变量名（如
--font-body-mobile），靠层叠覆盖即可 - 所有变量始终有定义，不会因媒体查询未命中导致
var()回退到initial或unset - 配合
<meta name="viewport" content="width=device-width">才真正生效
容易被忽略的兼容性细节
CSS变量本身在 IE 完全不支持，但现代项目基本已放弃 IE；真正容易踩坑的是变量作用域和计算时机：
-
:root内定义的变量可被所有后代元素继承，但若在某个组件内用.card { --color-primary: blue; }，那这个变量只对该元素及其子元素有效 - 媒体查询内的变量修改，仅影响该查询块内后续声明的选择器，不影响外部已计算的样式
- 如果用 JS 动态改
document.documentElement.style.setProperty('--breakpoint', '768px')，它不会触发媒体查询重新匹配——媒体查询只看视口，不看变量
