因为css规范禁止变量参与媒体查询条件，浏览器会静默丢弃整条@media规则；变量只能用于声明块内，如margin: var(--space-md)，断点必须用字面量如768px，且需在@media中显式重设:root变量值。
为什么不能在@media里直接用var(--breakpoint-sm)
浏览器会静默丢弃整条 @media 规则，不是报错，而是根本没解析——CSS 规范明确禁止变量参与媒体查询条件。你写 @media (min-width: var(--breakpoint-sm))，等价于写了无效语法，DevTools 里连这条规则都看不到。
真正能生效的只有字面量：比如 @media (min-width: 768px)。变量只能出现在声明块内部，例如 :root { --space-md: 16px; }，然后在 margin: var(--space-md) 这类地方用。
- 漏写单位（如
--breakpoint-sm: 768）会导致后续calc()计算失败，但不报错，只渲染异常 - 构建工具（PostCSS、Sass）可做变量替换，但纯 CSS 场景下必须人工同步断点值
- 别指望“定义一次，全局响应”——
:root里设了--breakpoint-sm: 768px，不等于所有@media自动代入
如何让断点值可维护又不失控制力
把断点数值定义在 :root 是为了方便 JS 读取或主题切换，但媒体查询本身仍需手写像素值。推荐做法是：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章