CSS变量不能在@media中用作断点，因媒体查询解析早于var()求值，且规范要求媒体特性值必须为字面量；@custom-media可复用断点但非动态，预处理器变量才是安全解法。
CSS变量不能在@media条件里当断点用，浏览器会静默丢弃整条规则——这不是bug，是规范硬性限制。
为什么@media (min-width: var(--md))完全不生效
媒体查询的解析发生在样式计算最前期，此时var()还没开始求值；而CSS规范明确要求媒体特性值必须是字面量（比如768px），var(--md)属于运行时表达式，语法上就不合法。结果就是：整条@media块被跳过，DevTools里显示为灰色，控制台零提示，也不报错。
- 即使
:root里已声明--md: 768px，也穿不过去 -
calc()、clamp()、em/rem单位、fallback写法var(--md, 768px)全无效 - 所有主流引擎（Blink/WebKit/Gecko）行为一致，没商量余地
@custom-media --md-up 是什么，它能替代 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)→ 输出@media (min-width: 768px) - 变量名建议统一前缀，如
$bp-md或$breakpoint-md，避免和CSS变量名混淆 - 别在Sass里
@import一个含var()的CSS文件再试图取值——Sass无法读取运行时CSS变量
:root + 媒体查询内重设变量，只管“样式输出”，不管“何时生效”
变量可以响应媒体查询变化，但断点本身仍得写死。关键在于：变量只传递值，不驱动匹配逻辑。
- 正确写法：
@media (max-width: 480px) { :root { --font-size-base: 14px; } } - 必须显式写出选择器（
:root），@media () { --x: 1 }无效 - 重设后的变量只对后续样式生效，且依赖继承链；若组件级作用域（如
.card）定义了同名变量，:root的修改不会穿透过去
真正容易被忽略的是：断点值决定布局结构是否切换，而字体、间距等变量只影响视觉节奏——二者演化逻辑完全不同。把--breakpoint-md和--spacing-lg混在同一个:root区块里维护，改一个就可能意外牵连另一个。
