不能。css变量不能用于@media条件，因媒体查询解析早于变量求值，且规范强制要求媒体特性值必须为字面量（如768px），var(--sm)属运行时表达式，语法非法，整条规则被浏览器静默丢弃。
不能。@media 中直接使用 var(--breakpoint) 会被所有浏览器静默丢弃——规则在 DevTools 里显示为灰色，控制台零提示，样式根本不生效。
为什么 @media (min-width: var(--sm)) 被浏览器完全忽略
CSS 媒体查询的解析发生在样式计算最前期，此时 var() 还没开始求值；而规范强制要求 min-width 这类媒体特性值必须是字面量（如 768px），var(--sm) 属于运行时表达式，语法上就不合法。浏览器看到它就判定整条规则非法，直接跳过，不进解析流程，也不触发 fallback。
-
calc(var(--sm) + 1px)、clamp()、单位换算（rem/em）全无效 -
var(--sm, 768px)的 fallback 不参与媒体查询语法校验 - 即使
:root已声明--sm: 768px，也穿不过去 - Blink（Chrome）、WebKit（Safari）、Gecko（Firefox）行为完全一致，不是 bug，是规范硬性限制
为什么 @media 块里单独写 --color: red 不生效
CSS 变量必须绑定到一个选择器才能挂载到继承链上。单独写 --color: red 没有宿主元素，等同于无效语句，浏览器跳过不解析。
- 必须显式写出选择器，最常用且安全的是
:root { --color: red; } - 写成
html { --color: red; }勉强可行，但:root才是规范定义的根继承节点 - 若写成
.card { --color: red; }，则只有.card及其后代能读取该值，无法全局覆盖
为什么顶层 :root 声明默认值是硬性前提
变量没有“延迟初始化”机制：var(--primary, #000) 的 fallback 只在 --primary 未被声明（not defined）时触发；而媒体查询不匹配时，--primary 就是未声明状态——此时所有 var(--primary) 都降级，且后续窗口缩放也不会自动刷新已计算样式。
- 必须先写
:root { --primary: #007bff; }，确保变量始终存在，避免 undefined 状态 -
@media中的:root { --primary: red; }本质是层叠覆盖，不是“修改”，所以必须和顶层同选择器、同特异性 - 若只在小屏媒体查询里写
:root { --primary: red; }，桌面端打开页面时getComputedStyle(document.documentElement).getPropertyValue('--primary')返回空字符串""，不是undefined，容易误判
真正容易被忽略的点是：断点变量（如 --breakpoint-md）和样式变量（如 --gap、--font-size-base）演化逻辑完全不同——前者决定布局结构是否切换，后者只影响视觉节奏。混在一起维护，改一个顺手调了另一个，却没意识到这是两类独立系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
