CSS变量不能作为@media断点阈值，是因为媒体查询要求min-width等值必须是字面量，var()属于运行时表达式，语法校验不通过，整条@media块被静默丢弃。
CSS变量不能作为@media断点阈值，是因为浏览器在解析媒体查询时根本不会执行var()求值——整条规则被语法级拒绝，不是失效，是压根没注册。
为什么@media (min-width: var(--md))完全不生效
媒体查询的匹配发生在样式计算最前期，此时CSS变量尚未进入继承链、未参与层叠、甚至没开始解析。规范强制要求min-width这类媒体特性值必须是字面量（如768px），而var(--md)属于运行时表达式，连语法校验都通不过。结果就是：整条@media块被静默丢弃，DevTools里显示为灰色，控制台零提示，也不进Styles面板。
以下写法全部无效：
@media (min-width: var(--md))-
@media (min-width: var(--md, 768px))（fallback不参与语法校验） -
@media (min-width: calc(var(--md) * 1px))（calc内含var()仍属非法） -
@custom-media --md-up (min-width: var(--md))（自定义媒体查询定义本身也不接受变量）
真正能复用断点值的三种合法路径
想避免硬编码480px、768px重复出现，又不想引入复杂构建流程？只有这三条现实路径：
立即学习“前端免费学习笔记（深入）”；
-
@custom-media：Safari原生支持；Chrome/Firefox需PostCSS插件（如
postcss-custom-media）转译。写法简洁：@custom-media --md-up (min-width: 768px);，后续用@media (--md-up)。注意：它只是别名机制，不能动态改值，断点值仍是硬编码字面量。 -
预处理器代入：Sass中定义
$breakpoint-md: 768px;，再写@media (min-width: $breakpoint-md)——变量在编译期展开为纯CSS，零运行时开销，全浏览器兼容。命名建议统一前缀，如$bp-md，避免和CSS变量名混淆。 -
:root + 媒体查询内重设：顶层声明默认值，再在每个
@media块中对:root重设变量。例如：@media (max-width: 768px) { :root { --gap: 8px; } }。注意：必须显式写出:root选择器，省略即无效；且所有依赖该变量的样式，需确保继承链完整（如写在body或其后代上）。
最容易被忽略的关键细节
断点值和样式变量（如--spacing-lg、--font-size-base）演化逻辑完全不同：前者决定布局结构是否切换，后者只影响视觉节奏。很多人把它们混在同一个:root区块里维护，改一个顺手调了另一个，却没意识到这是两类独立系统。
断点变量建议单独成块，加注释隔开，命名强制带--breakpoint-前缀；组件级变量应加命名空间（如--card-gap），避免:root上的变更意外污染其他模块。另外，--color: unset会让继承查找终止，子元素拿不到任何值，只能靠var(--color, #000)的fallback兜底。
