css变量不能用于媒体查询，因媒体查询匹配发生在变量求值前，var()在编译期非法；@media内直接声明变量无效，须绑定选择器如:root；安全复用断点需顶层声明+各媒体查询中重设:root变量。
CSS变量不能承载媒体查询逻辑，因为变量本身不参与条件判断，只负责存储和传递值；媒体查询的匹配发生在变量求值之前，两者生命周期完全错开。
为什么 @media (min-width: var(--sm)) 会被浏览器直接忽略
浏览器解析 CSS 时，先处理媒体查询匹配，再进行样式层叠与变量求值。var(--sm) 属于运行时表达式，而媒体特性值必须是编译期就确定的字面量（如 768px）。遇到 var()，引擎连语法校验都通不过，整条 @media 规则被静默丢弃——DevTools 里显示为灰色，控制台零提示，也不进 Styles 面板。
-
@media (min-width: var(--sm, 768px))同样非法，fallback 不参与媒体查询语法校验 - 即使
:root已声明--sm: 768px，也无法穿透到媒体特性中 - 所有主流渲染引擎（Blink/WebKit/Gecko）行为一致，这不是 bug，是规范强制要求
为什么在 @media 块里直接写 --color: red 不生效
CSS 变量必须绑定到选择器才能挂载到继承链上。@media (max-width: 768px) { --color: red; } 没有宿主元素，等同于无效语句，浏览器跳过不解析。
- 必须显式写出选择器，例如
@media (max-width: 768px) { :root { --color: red; } } - 用
html替代:root不推荐，:root才是规范定义的根继承节点 - 若写成
.card { --color: red; }，则只有.card及其后代能读取该值，无法“全局覆盖”
如何安全复用断点值：声明 + 重设模式
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一合规路径是：顶层声明默认值，再在每个匹配的媒体查询块中对 :root（或具体组件选择器）重新赋值。
- 顶层必须有
:root { --gap: 16px; --bp-md: 768px; }，否则未匹配时变量未定义，var(--gap)返回空字符串而非 fallback - 每个断点需单独重设：
@media (max-width: 768px) { :root { --gap: 8px; } } - 依赖这些变量的样式，要么写在该
@media内部，要么确保继承链完整（如子元素从body继承:root的值） - 组件级变量建议加命名空间，如
--card-gap，避免:root上的--gap变更意外影响其他模块
真正容易被忽略的继承断点：unset 和作用域隔离
--color: unset 会让继承查找终止，子元素拿不到任何值，只能靠 var(--color, #000) 的 fallback；而媒体查询中重设的 :root 变量，只影响其内部及后代，对已声明了自身 --color 的组件（如 .card { --color: #333; }）完全无感——你得在 .card 上重设，而不是幻想“全局覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
