CSS变量不能用于@media条件，因媒体查询匹配发生在变量求值前，规范强制要求媒体特性值必须为编译期字面量；@media (min-width: var(--sm))静默失效，整条规则被跳过，DevTools显示为灰色。
CSS变量不能用于@media条件，这是规范强制要求，不是兼容性问题，也不是bug——浏览器根本不会尝试解析它。
为什么 @media (min-width: var(--sm)) 会静默失效
媒体查询的匹配发生在样式计算最前期，此时浏览器连:root上的变量都还没开始读取。而CSS规范明确要求媒体特性值必须是编译期确定的字面量（如768px），var(--sm)属于运行时表达式，在语法校验阶段就被判定非法。结果是整条@media规则被跳过，DevTools里显示为灰色，控制台零提示，也不进Styles面板。
以下写法全部无效：
-
@media (min-width: var(--sm, 768px))—— fallback不参与语法校验 -
@media (min-width: calc(var(--sm) * 1px))—— calc()内含var()仍属运行时 -
@custom-media --md (min-width: var(--sm))—— 自定义媒体查询定义本身也不接受变量
为什么在 @media 块里直接写 --color: red 不生效
CSS变量必须绑定到选择器才能挂载到继承链上。@media (max-width: 768px) { --color: red; }没有宿主元素，等同于无效语句，浏览器直接跳过不解析。
立即学习“前端免费学习笔记（深入）”；
正确写法必须显式指定选择器：
-
@media (max-width: 768px) { :root { --color: red; } }✅ -
@media (prefers-color-scheme: dark) { .card { --text-color: #f0f0f0; } }✅（作用域匹配） -
@media (max-width: 768px) { html { --color: red; } }❌（:root才是规范定义的根继承节点）
如何安全复用断点值：声明 + 重设模式
变量不能驱动媒体查询，但媒体查询可以重设变量。这是唯一原生、无需构建工具的合规路径。
必须满足三个前提：
- 顶层
:root中必须先声明默认值，否则未匹配时var(--gap)返回空字符串而非fallback - 每个断点需单独在
@media块中对:root（或对应组件选择器）重新赋值 - 所有依赖该变量的样式，要么写在该
@media内部，要么确保继承链完整（如子元素从body继承:root的值）
例如：
:root { --gap: 1rem; --bp-md: 768px; }
@media (max-width: 768px) { :root { --gap: 0.75rem; } }
.text { font-size: var(--gap); }真正容易被忽略的继承断点
组件级变量不会从:root自动继承新值。你在.card里定义了--text-color，又在@media中改:root的同名变量，.card内的var(--text-color)依然读不到——因为它的作用域是.card自身。
另外：--color: unset会让继承查找终止，子元素拿不到任何值；JS修改document.documentElement.style.setProperty('--bp-md', '900px')也不会触发媒体查询重匹配，它只响应视口变化，不响应变量变更。
