CSS变量不能用于@media条件，因其计算时机晚于媒体查询解析，语法也禁止；正确做法是在媒体查询内定义变量以覆盖根变量。
如果你尝试过把CSS变量直接塞进媒体查询的条件里，比如写成 @media (min-width: var(--breakpoint))，结果多半是样式完全没反应。这不是你的代码写错了，而是因为这种写法本身就是无效语法，浏览器会直接忽略整条规则。
为什么CSS变量不能放进@media条件里
这事儿得从CSS的解析流程说起。媒体查询的解析，是CSS引擎最早进行的工作之一，它要快速判断当前环境（比如视口宽度）是否匹配条件。而CSS变量的计算呢？它发生得晚得多，是在样式层叠和继承之后才进行的。两者在时间线上根本对不上，语法规范也明确禁止变量出现在媒体特性的值里。
所以，你可能会遇到下面这些典型的“坑”：
- 满怀期待地写下
@media (min-width: var(--sm)) { ... }，结果样式纹丝不动。打开开发者工具一看，这条规则被标灰了，控制台却静悄悄的，没有报错。 - 误以为变量能“动态”响应视口变化，实际上它只是静态的。如果变量没定义，它可能就默默回退到一个默认值（比如0），但媒体查询本身并不会因为变量值改变而重新匹配。
- 更常见的一个误解，是把CSS变量当成Ja vaScript变量来用，期待它能像
window.innerWidth一样实时更新，从而让媒体查询“活”起来。这想法很美好，但现实是，媒体查询的匹配只看视口等环境条件，不看CSS变量。
正确用法：变量定义在媒体查询内部
那正确的路该怎么走？其实很简单：调转一下思路。不是把变量放进媒体查询的条件里，而是在匹配的 @media 块内部，去声明或修改CSS变量的值。这样一来，新的变量值就只对这个断点范围内的样式生效。
立即学习“前端免费学习笔记（深入）”；
这种模式在响应式设计中特别实用，比如你想在不同屏幕尺寸下，统一调整整个页面的字号比例或间距基准：
- 先在基础层（通常是
:root）定义好默认值：: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; } }
这里有个关键点要记住：这些在媒体查询里被修改的变量，必须在后续的具体样式规则中，通过 calc() 或直接使用 var(--font-scale) 来调用，才能真正发挥作用。它们自己是驱动不了媒体查询的。
移动端优先 + 单向 min-width 的组合更可靠
在实际项目中，采用“移动端优先”的策略，配合单向递增的 min-width 断点来覆盖变量，往往是最清晰、最不容易出错的做法。把基础样式（针对手机）写在媒体查询外面，然后用越来越大的 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,--font-body-desktop），一套变量名走天下，全靠CSS层叠的自然覆盖机制。 - 所有变量在任何时候都有定义，避免了因为某个媒体查询未匹配，导致
var()回退到初始值，造成样式跳跃或丢失。 - 当然，这一切的前提是，你的HTML里已经设置了那个经典的视口meta标签：
，否则响应式布局无从谈起。
容易被忽略的兼容性细节
说到兼容性，CSS变量（也叫自定义属性）在IE浏览器上全军覆没，不过对于现代前端项目来说，这通常已经不是问题了。真正容易在细节上翻车的，是变量的作用域和计算时机：
- 在
:root里定义的变量是全局的，所有后代元素都能继承。但如果你在某个具体的组件选择器里定义变量，比如.card { --color-primary: blue; }，那么这个变量就只对.card元素及其子元素有效，这就是作用域的限制。 - 媒体查询内部对变量的修改，只影响该查询块内、位于变量声明之后的选择器。它不会回过头去改变查询块外部、已经计算好的样式。
- 最后再强调一次：如果你用Ja vaScript动态修改了根元素上的变量值，比如
document.documentElement.style.setProperty('--breakpoint', '768px')，这并不会触发媒体查询重新进行匹配。媒体查询的“眼睛”只盯着视口尺寸等硬性条件，对CSS变量的变化是“视而不见”的。
