不能。@media 中直接使用 var(--breakpoint-md) 无效，因 CSS 规范要求媒体特性值必须为字面量，var() 在媒体查询解析阶段尚未求值，浏览器直接忽略整条规则；可行方案仅有 @custom-media、预处理器代入、:root 内重设三种。
不能。@media 里直接写 var(--breakpoint-md) 会被所有浏览器静默忽略，规则在 DevTools 里显示为灰色，控制台不报错、也不生效——这不是兼容性问题，是 CSS 规范强制要求媒体特性值必须为字面量。
为什么 @media (min-width: var(--md)) 完全无效
CSS 媒体查询的解析发生在样式计算最前期，此时 var() 还没开始求值；而规范明确要求 min-width 这类媒体特性只能接受字面量（如 768px），var(--md) 属于运行时表达式，语法非法。浏览器直接跳过整条 @media 块，连 fallback 都不触发。
-
calc(var(--md) + 1px)、clamp()、em/rem换算全无效 -
var(--md, 768px)的 fallback 机制在此场景不启用 - 即使
:root已声明--md: 768px，也穿不过去
真正能复用断点值的三种可行路径
想避免硬编码 480px、768px 多次出现，又不想引入复杂构建流程？只有这三条现实路径：
-
@custom-media：Safari 原生支持；Chrome/Firefox 需 PostCSS 插件（如postcss-custom-media）转译。写法简洁：@custom-media --md-up (min-width: 768px);，后续用@media (--md-up) -
预处理器代入：Sass/Less 中定义
$breakpoint-md: 768px，再写@media (min-width: $breakpoint-md)——变量在编译期展开为纯 CSS，零运行时开销 -
:root+ 媒体查询内重设：在:root声明默认值，再在每个@media块中用:root { --spacing-unit: 0.75rem; }覆盖。注意：变量本身不驱动断点，只用于后续样式引用
容易被忽略的关键细节
断点变量和样式变量（如 --spacing-lg、--font-size-base）演化逻辑完全不同：前者决定布局结构是否切换，后者只影响视觉节奏。很多人把它们混在同一个 :root 区块里维护，改一个顺手调了另一个，却没意识到这是两类独立系统。
立即学习“前端免费学习笔记（深入）”；
- 断点变量建议单独成块，加注释隔开，命名强制带
--breakpoint-前缀 -
@custom-media不是变量方案，只是别名机制，不能动态改值 - PostCSS 替换插件（如
postcss-custom-properties）仅支持静态常量值，含calc()或嵌套var()的变量会原样保留，导致失效
目前（2026年7月）仍无原生支持方案，env(--breakpoint) 草案尚未落地。实际项目里，@custom-media 加 PostCSS 是最轻量且未来兼容性最好的选择——但得记住：它解决的是“复用写法”，不是“运行时变量”。
