@media 不支持 var()，因规范禁止变量参与媒体查询计算，会静默跳过整条规则；断点必须用字面量如768px；但可在匹配的 @media 内通过 :root 重定义CSS变量以实现响应式样式更新。
不能在 @media 条件里用 var(--breakpoint)，但可以在匹配的 @media 块内部安全重写 :root 变量——前提是变量已正确定义、引用路径正确、单位完整。
为什么 @media (min-width: var(--sm)) 会静默失效
CSS 规范明确禁止变量参与媒体查询条件计算。浏览器解析时直接跳过整条 @media 规则，不报错、不警告、也不注册断点。你改了 --sm 的值，但断点根本没生效。
- 断点必须用字面量写，比如
768px、480px，不能是变量 -
--sm这类变量可以且应该定义在:root中，用于后续样式复用（如padding: var(--sm)），但绝不能塞进@media圆括号里 - 想统一管理断点数值？可以定义
:root { --breakpoint-md: 768px; }，然后在 JS 或构建时生成对应媒体查询，但纯 CSS 不支持运行时求值
在 @media 内重写 :root 变量的正确写法
变量重写必须落在 :root 选择器下，且该 @media 已成功匹配。浏览器会重新计算级联值，所有 var(--x) 引用自动更新。
- 初始值必须定义在顶层
:root，否则未命中任何媒体查询时变量为unset，var(--x)会 fallback 到继承值或默认值（比如0、transparent） - 变量名要一致：不能一处叫
--spacing，另一处写成--gap；命名建议带语义前缀，如--spacing-sm、--font-size-lg - 示例写法：
:root {
--spacing: 0.5rem;
--font-size-body: 1rem;
}
@media (min-width: 768px) {
:root {
--spacing: 1rem;
--font-size-body: 1.125rem;
}
}
p {
margin: var(--spacing);
font-size: var(--font-size-body);
}重写后样式没变？先检查这三处
变量值变了，但元素没响应，问题几乎都出在引用链上，不是变量本身失效。
立即学习“前端免费学习笔记（深入）”；
- 样式规则里没显式用
var(--x)：比如写了margin: 1rem;，那改--spacing毫无意义；必须写成margin: var(--spacing); - 变量定义在局部作用域：如
.card { --spacing: 1rem; }，而@media却去改:root→ 两者作用域不重叠，改了白改 -
!important覆盖了变量值：比如某处写了font-size: 1.25rem !important;，它会压制font-size: var(--font-size-base);，哪怕变量值变了也无效
图片 URL 和 clamp() 是两个高危场景
这两处最容易因变量使用不当导致静默失败或资源误加载。
- 别在
:root里设默认--img-url: "fallback.jpg";—— 浏览器会在解析时立即加载这张图。正确做法是每个@media块只声明自己需要的 URL：@media (max-width: 767px) { :root { --img-url: "small.jpg"; } }，且:root顶层不声明任何--img-url -
font-size: clamp(var(--min), calc(var(--min) + var(--slope) * 1vw), var(--max));在旧版 Safari 可能因单位混用（如--min: 1rem、--max: 24px）计算失败；统一用rem或统一用px，确保calc()里所有项单位可加减（1rem + 2vw合法，1rem + 2px在部分环境报错）
真正麻烦的不是怎么写变量，而是忘记：变量不会自动注入到所有地方，也不会绕过 CSS 作用域和层叠规则。每次改完，务必确认变量定义位置、引用位置、是否被 !important 截断、以及单位是否混用——这些才是实际项目里最常卡住人的点。
