@media (min-width: var(--sm)) 被浏览器忽略，因媒体查询要求编译期字面量值，var()属运行时机制，语法非法致整条规则静默丢弃；fallback不生效，且css变量须绑定选择器（如:root）才生效。
为什么 @media (min-width: var(--sm)) 会被浏览器完全忽略
浏览器解析 CSS 时，媒体查询匹配发生在样式计算最前期，而 var() 是运行时求值机制，依赖继承链、层叠顺序和作用域解析——两者根本不在同一处理阶段。CSS 规范强制要求媒体特性（如 min-width）的值必须是编译期确定的字面量（例如 768px），var(--sm) 属于非法语法，整条 @media 规则被静默丢弃。DevTools 中显示为灰色，控制台零提示，也不进 Styles 面板。
var(--bp, 768px) 的 fallback 在媒体查询里压根不生效
很多人误以为 fallback 能兜底，但事实是：fallback 机制只在 var() 实际被调用（比如写在 color: var(--c, #000) 里）时才起作用；而在媒体查询条件中，var() 连语法校验都通不过，根本不会进入求值流程。所以 @media (min-width: var(--bp, 768px)) 和 @media (min-width: var(--bp)) 行为完全一致——都被跳过。
为什么 @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; } }—— 组件级生效
用 html 替代 :root 不推荐，:root 才是规范定义的根继承节点。
真正能复用断点值的三种现实路径
想避免重复写 480px、768px，又不想引入构建工具？只有这三条可行路径：
-
@custom-media：Safari 15.4+ 原生支持；Chrome/Firefox 需 PostCSS 插件（如
postcss-custom-media）转译。写法：@custom-media --md-up (min-width: 768px);，后续用@media (--md-up) -
预处理器变量：Sass 中
$bp-md: 768px;→@media (min-width: $bp-md)，编译期展开为纯 CSS，零运行时开销 -
:root + 媒体查询内重设：顶层声明
:root { --gap: 1rem; }，再在每个@media中重设:root { --gap: 0.75rem; }。注意：变量不驱动断点，只用于后续样式引用
容易被忽略的是：断点值和样式变量演化逻辑完全不同。把 --breakpoint-md 和 --spacing-lg 混在同一个 :root 区块里维护，改一个就可能意外牵连另一个。断点变量建议单独成块，命名强制带 --breakpoint- 前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
