不能。@media (min-width: var(--sm)) 被浏览器在语法解析阶段静默丢弃，因媒体特性值必须是编译期确定的字面量，var() 属运行时行为；正确做法是顶层声明变量并在各 @media 中通过 :root 显式重设。
不能。@media (min-width: var(--sm)) 这类写法在所有主流浏览器中都会被静默丢弃——不是兼容性问题，是 CSS 规范在语法解析阶段就拒绝它。
为什么浏览器直接跳过整条 @media 规则
媒体查询匹配发生在样式计算之前，而 var() 的求值依赖继承链、层叠顺序和作用域解析，属于运行时行为。规范强制要求 min-width、max-height 等媒体特性值必须是编译期就能确定的字面量（如 768px）。var(--sm) 在语法校验时就被判定非法，整条规则不进入后续流程。
- DevTools 中该规则显示为灰色，控制台零提示、不报错
-
@media (min-width: var(--sm, 768px))同样无效 —— fallback 不参与语法校验 -
@media (min-width: calc(var(--sm) * 1px))也非法，calc()内含var()仍属运行时表达式
@media 块内直接写 --color: red 为什么没效果
CSS 变量必须绑定到一个选择器才能挂载到继承链上。@media (max-width: 768px) { --color: red; } 没有宿主元素，等同于无效语句，浏览器跳过不解析。
- 正确写法必须显式写出选择器：
@media (max-width: 768px) { :root { --color: red; } } - 用
html替代:root不推荐，:root才是规范定义的根继承节点 -
.card { --color: red; }只影响.card及其后代，无法“全局覆盖”
真正能复用断点值的合法路径
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一原生、无需构建工具的方式是：顶层声明默认值 + 各媒体查询块中对 :root 显式重赋值。
- 顶层必须先声明：
:root { --gap: 1rem; --bp-md: 768px; } - 每个断点单独覆盖：
@media (max-width: 768px) { :root { --gap: 0.75rem; } } - 省略
:root选择器（如@media () { --gap: 8px; }）是无效语法 - 依赖这些变量的样式，需确保继承链完整（例如写在
body或其后代上）
容易被忽略的继承与刷新时机细节
你以为改了 :root 就全局生效，实际受继承链、作用域隔离和重绘时机三重限制。
-
--color: unset会让继承查找终止，子元素拿不到任何值，只能靠var(--color, #000)fallback - 组件级变量（如
.card { --text-color: #333; }）不会从:root继承新值，必须在对应选择器内重设 - 媒体查询匹配后，已渲染元素的样式不会自动刷新 ——
var(--gap)的值要等下一次样式重计算（如 class 切换、DOM 变动）才更新 - JS 修改
--bp-md不会触发媒体查询重匹配，它只响应视口尺寸变化，不响应变量变更
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
