css变量不能用于@media条件，因媒体查询匹配早于变量求值；唯一安全复用断点的方式是在各@media块内显式重设:root变量。
CSS变量不能出现在@media条件里，这是规范硬限制，不是bug，也永远不会支持。 你写 @media (min-width: var(--sm))，浏览器直接跳过整条规则，DevTools 显示为灰色，控制台零提示——它连语法校验都没过。
为什么@media (max-width: var(--bp-md))会静默失效
媒体查询匹配发生在样式计算之前，而 var() 求值依赖继承、层叠和作用域解析，两者根本不在同一处理阶段。浏览器看到 var(--bp-md) 就判定为非法值，整条规则被丢弃。
-
@media (min-width: var(--sm, 768px))同样无效——fallback 不参与语法校验 - JS 修改
--bp-md后，媒体查询不会重新匹配；它只响应视口变化，不响应变量变更 - 预处理器变量（如 Sass 的
$sm）能用，但那是编译期替换，和 CSS 变量的运行时机制无关
如何安全复用断点值：必须在@media内重设:root
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一合法路径是：先在顶层 :root 声明默认值，再在每个匹配的媒体查询块中对 :root 重新赋值。
- 必须显式写
:root，不能省略或换成html或其他选择器 - 必须有顶层声明，否则未匹配媒体查询时变量未定义，
var(--gap, 12px)的 fallback 才会生效，但后续缩放也不会自动刷新已计算样式 - 示例：
@media (max-width: 768px) { :root { --gap: 8px; --font-size-base: 14px; } } - 所有依赖这些变量的样式，要么写在该
@media内部，要么确保继承链完整（如子元素从body继承）
组件级变量别指望:root全局覆盖
你在 .card 里定义了 --text-color，又在 @media (prefers-color-scheme: dark) 中对 :root 改 --text-color，那 .card 内的 var(--text-color) 依然读不到——因为它的作用域是 .card 自身，不是 :root。
- 媒体查询中重定义变量，必须作用于同一选择器层级：
@media (dark) { .card { --text-color: #f0f0f0; } } - 别把所有变量都堆在
:root，否则一个--primary变动会意外影响所有组件 - 组件级变量应带命名空间，如
--card-text-color，避免跨容器污染 - 真正容易被忽略的是继承断点：
--color: unset会让查找终止，子元素拿不到任何值，只能靠 fallback
最常被忽略的一点：媒体查询中重设的 :root 变量，只影响其内部及后代元素；如果某个组件用了 .card { --text-color: #333; }，那它压根不参与 :root 的继承链——你得在对应选择器上重设，而不是幻想“全局覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
