不能。css变量不能在@media中作断点值，因媒体查询解析早于var()求值，且规范强制要求媒体特性值必须为字面量（如768px），var(--md)属运行时表达式，语法非法，整条规则被浏览器静默丢弃。
CSS变量不能在@media中当断点值用，浏览器会静默丢弃整条规则——这不是兼容性问题，是CSS规范强制禁止的行为。
为什么@media (min-width: var(--md))完全不生效
CSS媒体查询的解析发生在样式计算最前期，此时var()还没开始求值；而规范明确要求min-width这类媒体特性值必须是字面量（比如768px），var(--md)属于运行时表达式，语法上就不合法。结果就是：整条@media规则被跳过，DevTools里显示为灰色，控制台零提示，也不报错。
-
calc(var(--md) + 1px)、clamp()、单位换算（如rem/em）全无效——只要var()出现在媒体特性值位置，就非法 -
var(--md, 768px)的fallback不参与语法校验，哪怕顶层:root已声明--md: 768px，也穿不过去 - Blink（Chrome）、WebKit（Safari）、Gecko（Firefox）行为完全一致，没例外，不是bug
@custom-media能绕过这个限制吗
不能。它和var()无关，只是媒体查询别名机制，定义本身也不接受变量：@custom-media --md-up (min-width: var(--md))同样被拒。它的断点值仍是硬编码字面量。
- 写法是
@custom-media --md-up (min-width: 768px);，后续用@media (--md-up) - Safari原生支持；Chrome/Firefox需PostCSS插件（如
postcss-custom-media）转译 - 它解决的是“复用命名”，不是“动态断点”——值不能改，也不能绑定到CSS变量
真正能复用断点值的可行路径
想避免重复写480px、768px多次，又不想引入复杂构建流程？只有这三条现实路径：
-
预处理器代入：Sass/Less中定义
$bp-md: 768px，再写@media (min-width: $bp-md)——变量在编译期展开为纯CSS，零运行时开销 -
:root+ 媒体查询内重设：顶层声明:root { --gap: 16px; }，再在@media (max-width: 768px) { :root { --gap: 8px; } }中覆盖——变量本身不驱动断点，只用于后续样式引用 -
JS辅助读取：用
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')配合window.matchMedia()手动比对——适合需要JS响应的场景，但无法替代CSS媒体查询本身
最容易被忽略的是：断点值（如--breakpoint-md）和样式变量（如--spacing-lg）演化逻辑完全不同——前者决定布局结构是否切换，后者只影响视觉节奏。混在一起维护，改一个就可能意外牵连另一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
