css变量无法用于媒体查询条件，因规范要求媒体特性值必须为字面量，var()属运行时表达式，语法非法；可行方案是在@media中重新赋值:root变量。
不能。CSS变量（var(--name)）根本无法出现在媒体查询的条件部分，包括断点值、特性名或任何参数位置——这不是兼容性问题，是 CSS 规范在解析阶段就拒绝的行为。
为什么 @media (min-width: var(--sm)) 会静默失效
媒体查询的匹配发生在样式计算之前，此时 var() 还没开始求值；而规范强制要求媒体特性值必须是字面量（如 768px），var(--sm) 属于运行时表达式，语法非法。浏览器直接跳过整条规则，DevTools 中显示为灰色，控制台零提示，也不报错。
-
@media (max-width: var(--bp-md, 768px))同样无效 —— fallback 不参与语法校验 - 即使
:root已声明--sm: 480px，也无法穿透到媒体查询条件中 - 所有主流引擎（Blink/WebKit/Gecko）行为一致，没有例外
哪些写法看似合理但实际非法
这些常见尝试全部失败，且不会给出任何警告：
-
@media (min-width: calc(var(--sm) * 1px))——calc()里含var()仍属运行时，不被允许 -
@media (min-width: clamp(320px, var(--sm), 1200px))——clamp()本身合法，但里面嵌var()作为参数，依然卡在语法校验层 -
@media (prefers-color-scheme: var(--theme))—— 特性值必须是字面量dark或light，不能是变量引用 -
@custom-media --md (min-width: var(--sm))——@custom-media定义本身也不能含var()
真正能复用断点值的可行路径
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一安全、原生、无需构建工具的方式是显式在每个 @media 块内对 :root 重新赋值：
- 顶层必须先声明：
:root { --gap: 1rem; --font-size-base: 1rem; } - 然后在媒体查询中覆盖：
@media (max-width: 768px) { :root { --gap: 0.75rem; --font-size-base: 0.875rem; } } - 所有使用
var(--gap)的样式，需确保继承链完整（例如写在body下或子元素上） - 别省略
:root选择器 ——@media () { --gap: 8px; }是无效语法
容易被忽略的继承与作用域细节
你以为改了 :root 就全局生效，但实际依赖继承链和声明时机：
- 组件级变量（如
.card { --text-color: #333; }）不会从:root继承新值，必须在对应选择器内重设 -
--color: unset会让继承中断，子元素拿不到任何值，只能靠var(--color, #000)fallback - 媒体查询匹配后，已渲染元素的样式不会自动刷新 ——
var(--gap)的值要等下一次样式重计算（如 class 切换、DOM 变动）才更新 - 把
--breakpoint-md和--spacing-lg混在一个:root区块里维护，容易误改断点逻辑，建议物理分隔并加注释
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
