css变量无法用于@media条件，因媒体查询匹配发生在变量求值前，规范要求媒体特性值必须为字面量；可行方案包括@custom-media、预处理器代入、:root内重设断点值。
不能。 CSS 变量（var(--breakpoint-md)）无法直接用在 @media 条件中，浏览器会静默忽略整条规则，不报错、不警告、DevTools 里显示为灰色禁用状态——这不是兼容性问题，是 CSS 规范层面的硬限制。
为什么 @media (min-width: var(--breakpoint)) 完全无效
CSS 媒体查询的匹配发生在样式计算最前期，此时 var() 还未求值；而变量是运行时、基于层叠和继承动态计算的。两者时机根本错开。规范明确要求媒体特性值必须是字面量（如 768px），var() 属于非法语法，浏览器直接跳过整条 @media 块。
- 即使你在
:root正确声明了--breakpoint-md: 768px，也无济于事 -
@media (min-width: var(--breakpoint, 768px))同样无效——fallback 机制不适用于媒体查询条件 - 改用
rem、em或去掉单位（如--breakpoint: 768）都不能绕过该限制
真正能复用断点值的三种可行路径
想避免硬编码 480px、768px 多次出现，又不想引入构建工具？只有这三条现实路径：
-
@custom-media：Safari 原生支持；Chrome/Firefox 需 PostCSS 插件（如
postcss-custom-media）转译。写法简洁：@custom-media --md-up (min-width: 768px);，后续用@media (--md-up) -
预处理器代入：Sass/Less 中定义
$breakpoint-md: 768px，再写@media (min-width: $breakpoint-md)—— 变量在编译期展开为纯 CSS，无运行时负担 -
:root + 媒体查询内重设：在
:root声明默认值，再在每个@media块中用:root { --spacing-unit: 0.75rem; }覆盖。注意：变量本身不驱动断点，只用于后续样式引用
容易被忽略的关键细节
很多人把 --breakpoint-md 和 --spacing-lg 混在同一个 :root 区块里维护，结果调一个值顺手改了另一个，却没意识到：断点值决定布局结构是否切换，而间距/字体值只影响视觉节奏，二者演化逻辑完全不同。
- 断点变量建议单独成块，加注释隔开，命名强制带
--breakpoint-前缀 - 所有依赖
var(--x)的样式，必须确保其选择器能继承到该变量作用域（通常意味着写在:root之后、或显式指定父级作用域） - IE 不支持 CSS 变量，若需兼容，必须用 PostCSS 插件降级（如
postcss-css-variables）
目前（2026年5月）仍无原生支持方案。草案中的 env(--breakpoint) 尚未落地，别等它救场。实际项目里，@custom-media 加 PostCSS 是最轻量且未来兼容性最好的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
