CSS变量不能用于@media查询，因媒体查询需编译期常量；可用@custom-media、Sass/Less预处理器或Sass Map统一管理断点；断点与布局变量应分离命名并注释区分。
纯 CSS 变量（--breakpoint-md）可以统一存储断点数值，但不能直接用于 @media 查询条件中。浏览器在解析媒体查询时要求值是编译期已知的常量，而 CSS 变量是运行时注入的字符串，因此写 @media (min-width: var(--breakpoint-md)) 会被静默忽略——DevTools 里都看不到这条规则生效。
能用变量的地方：断点值声明与辅助属性
你可以在 :root 中集中定义断点数值，用于其他支持变量的场景：
- 在
calc()中参与计算，比如：width: calc(100vw - var(--breakpoint-md)); - 控制伪元素内容：
::before { content: var(--breakpoint-md); }，再配合 JS 读取做逻辑判断 - 驱动非布局类样式，如动画时长、过渡延迟等随屏幕变化的属性
真正可行的统一管理方案
想让断点“一处修改、全局生效”，必须借助构建阶段工具或规范扩展：
-
@custom-media：Safari 原生支持；Chrome/Firefox 需 PostCSS 插件（如
postcss-custom-media）转译。写法简洁：@custom-media --md-up (min-width: 768px);
之后可直接使用：@media (--md-up) { ... } -
Sass/Less 预处理器：在
_breakpoints.scss或variables.less中定义语义化变量，如$breakpoint-md: 768px;，再通过@mixin封装媒体查询逻辑，编译后生成标准 CSS -
Sass Map 结构：用
$breakpoints: ("sm": 576px, "md": 768px);统一维护，配合map-get()和自定义函数（如@function breakpoint($key)）安全取值，避免拼写错误和 null 值问题
为什么别把断点和布局变量混在一起
断点决定“什么时候切”，布局变量（如 --spacing-lg、--card-radius）决定“切完怎么排”。二者演化逻辑不同：改一个断点可能影响整套栅格行为，而调一个圆角只影响视觉细节。建议在 :root 中用注释分隔，命名加前缀，例如：
立即学习“前端免费学习笔记（深入）”；
/* —— Breakpoints —— */--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
/* —— Layout & Spacing —— */
--space-md: 1rem;
--card-min-width: 280px;
