var()不能用于@media条件，因媒体查询解析早于变量求值，浏览器在语法校验阶段即静默丢弃整条规则；必须用字面量写断点，并在@media块内通过:root或具体选择器重设变量。
var() 不能出现在 @media 条件中，这是浏览器解析阶段就拒绝的语法错误，不是兼容性或写法问题。
为什么 @media (min-width: var(--sm)) 完全不生效
浏览器在解析 CSS 时，先处理媒体查询匹配，再进行变量求值。而 var(--sm) 是运行时表达式，必须等到继承链、层叠规则都确定后才计算——它根本没机会进入媒体查询的判断流程。
结果就是整条 @media 规则被静默丢弃：DevTools 的 Styles 面板里看不到它，控制台无报错，也不触发任何样式重算。
以下写法全部非法，且行为一致：
@media (min-width: var(--sm))-
@media (min-width: var(--sm, 768px))（fallback 不参与语法校验） -
@media (min-width: calc(var(--sm) * 1px))（calc()内含var()仍属运行时） -
@custom-media --md (min-width: var(--sm))（自定义媒体查询本身也禁止变量）
@media 块里直接写 --color: red 为什么没效果
CSS 变量必须绑定到一个选择器才能挂载到继承链上。单独写 --color: red 没有宿主元素，等同于无效语句，浏览器跳过不解析。
必须显式指定作用域：
- ✅ 正确：
@media (max-width: 768px) { :root { --color: red; } } - ✅ 组件级有效：
@media (prefers-color-scheme: dark) { .card { --text-color: #f0f0f0; } } - ❌ 错误：
@media (max-width: 768px) { --color: red; }（无选择器，无效） - ⚠️ 不推荐：
@media (max-width: 768px) { html { --color: red; } }（:root才是规范定义的根继承节点）
为什么 JS 改了 --bp-md，媒体查询却不重新匹配
媒体查询只响应视口变化（如 resize、横竖屏切换、DPR 变化），不响应 CSS 变量变更。
执行 document.documentElement.style.setProperty('--bp-md', '480px') 后：
-
getComputedStyle(document.documentElement).getPropertyValue('--bp-md')确实返回新值 - 但所有已匹配的
@media规则不会重触发，也不会导致依赖该变量的样式自动更新 - 除非你手动触发重绘（比如切换
class、修改transform或 DOM 结构） - 更关键的是：这根本改不了断点逻辑——
@media (max-width: 768px)永远还是 768px，不会变成 480px
真正能复用断点值的合法路径
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一原生、零构建工具依赖的做法是：
- 顶层必须声明：
:root { --gap: 1rem; --font-size-base: 1rem; }（否则未匹配时变量未定义） - 每个断点内显式重设：
@media (max-width: 768px) { :root { --gap: 0.75rem; --font-size-base: 0.875rem; } } - 所有使用
var(--gap)的样式，需确保继承链完整（例如写在body或其后代上） - 组件级变量别指望
:root全局覆盖——.card { --text-color: #333; }定义了自己的作用域，:root的变更对它完全无感
最容易被忽略的一点：媒体查询中重设的变量，只影响该块内及后代；如果某个元素已经通过自身选择器定义了同名变量，那它压根不参与 :root 的继承链——你得在对应选择器上重设，而不是幻想“全局覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
