css变量不能在@media中用作断点值，因媒体查询解析早于var()求值，且规范强制要求媒体特性必须为字面量（如768px），var(--md)属运行时表达式，语法非法，整条规则被静默丢弃；calc()、fallback、单位换算均无效；@custom-media仅是别名机制，非变量方案；预处理器变量（如sass）在编译期展开为字面量，才是安全解法。
CSS变量不能在@media中当断点用，浏览器会静默丢弃整条规则——这不是bug，是规范硬性限制。
为什么 @media (min-width: var(--md)) 完全不生效
CSS媒体查询的解析发生在样式计算最前期，此时var()还没开始求值；而CSS规范明确要求媒体特性值必须是字面量（比如768px），var(--md)属于运行时表达式，语法上就不合法。结果就是：整条@media块被跳过，DevTools里显示为灰色，控制台零提示，也不报错。
-
calc()、clamp()、单位换算（em/rem）、fallback写法var(--md, 768px)全无效 - 即使
:root里已声明--md: 768px，也穿不过去 - 所有主流引擎（Blink/WebKit/Gecko）行为一致，没商量余地
@custom-media 能替代 var() 吗
@custom-media不是CSS变量方案，而是媒体查询别名机制。它和var()无关，也不能动态改值，但能真正复用断点逻辑。
- 写法：
@custom-media --md-up (min-width: 768px);，后续用@media (--md-up) - Safari原生支持；Chrome/Firefox需PostCSS插件（如
postcss-custom-media）转译 -
@custom-media定义本身不能含var()，断点值仍是硬编码字面量
预处理器变量（Sass/Less）才是安全解法
这是目前最稳定、零运行时开销、全浏览器兼容的解法——变量在编译期展开为纯CSS字面量。
- Sass写法示例：
$breakpoint-md: 768px;→@media (min-width: $breakpoint-md) - 变量名建议统一前缀，如
$bp-md或$breakpoint-md，避免和CSS变量名混淆 - 别在Sass里
@import一个含var()的CSS文件再试图取值——Sass无法读取运行时CSS变量
真正容易被忽略的是断点值和样式变量的演化逻辑完全不同
把--breakpoint-md和--spacing-lg混在同一个:root区块里维护，改一个就可能意外牵连另一个。断点值决定布局结构是否切换，而字体、间距等变量只影响视觉节奏——二者根本不在同一演化路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
