CSS变量不能用于@media条件表达式，因媒体查询匹配发生在变量求值前，属语法硬限制；正确做法是用媒体查询重设:root变量值，再通过var()在样式中引用。
CSS变量不能出现在 @media 条件表达式里，这是语法硬限制，不是浏览器兼容问题，也不存在“未来会支持”的可能。
为什么 @media (min-width: var(--sm)) 会静默失效
CSS引擎解析媒体查询时，是在样式计算（包括变量求值）之前就完成的。var() 的值要等到层叠、继承、作用域都确定后才计算，而 @media 的匹配必须在那一刻之前就决定——两者根本不在同一个处理阶段。所以浏览器直接忽略整条规则，DevTools 里该规则显示为灰色，控制台也不报错。
常见误判包括：
- 以为写成
@media (min-width: var(--sm, 768px))就能 fallback，实际连语法校验都过不了 - 在 JS 中动态改
--sm后期待媒体查询重新触发，但媒体查询只响应视口变化，不响应变量变更 - 把
:root里定义的--sm当作“全局常量”，误以为它能参与条件判断逻辑
正确做法：把变量定义放进媒体查询块内部
变量本身可以被媒体查询“覆盖”，这才是设计本意。你不是用变量驱动媒体查询，而是用媒体查询来控制变量值。
立即学习“前端免费学习笔记（深入）”；
典型写法如下：
:root {
--font-size: 1rem;
--gap: 0.5rem;
}
<p>@media (min-width: 768px) {
:root {
--font-size: 1.125rem;
--gap: 0.75rem;
}
}</p><p>@media (min-width: 1024px) {
:root {
--font-size: 1.25rem;
--gap: 1rem;
}
}</p><p>.text { font-size: var(--font-size); }
.grid { gap: var(--gap); }这样做的关键好处：
- 所有变量始终有定义，不会因某断点未命中导致
var(--x)回退到initial或继承链断裂 - 无需维护
--gap-mobile/--gap-desktop这类冗余命名 - 后续用
calc()或其他函数时，拿到的是已生效的、上下文正确的值
var() 默认值在媒体查询场景下的陷阱
很多人想靠 var(--breakpoint, 768px) 来兜底，但默认值只在变量**完全未声明**或被显式设为 initial/unset 时才生效。如果变量已在 :root 声明但值非法（比如 --breakpoint: auto），部分浏览器仍尝试解析，不走默认值。
更隐蔽的问题是链式降级：
:root {
--bp-sm: var(--bp-mobile, 480px);
}
@media (min-width: var(--bp-sm)) { /* ❌ 依然非法 */ }这种嵌套写法看似聪明，实则无效——var() 只能在属性值位置使用，不能进入媒体特性表达式。而且一旦出现循环引用（如 --a: var(--b); --b: var(--a)），Chrome 和 Firefox 会静默失败，最终渲染不可预测。
真正需要动态断点时，该怎么做
如果你确实需要根据 JS 计算结果切换断点行为（比如适配折叠屏、横竖屏切换逻辑），CSS 变量无能为力，必须换思路：
- 用 JS 监听
resize或orientationchange，动态添加/移除 class（如is-large-screen），再用类名驱动样式 - 对关键组件，直接在 JS 中调用
matchMedia()并绑定回调，手动更新style.setProperty() - 放弃“一套 CSS 覆盖所有设备”的执念，在构建时用 PostCSS 插件（如
postcss-custom-media）预编译出多套静态断点规则
最常被忽略的一点：媒体查询 + CSS 变量的组合，本质是“静态分层 + 动态复用”，不是“动态条件判断”。把变量当成配置项，而不是运行时表达式，才能避开绝大多数坑。
