CSS自定义属性不能用于@media查询，因其值在运行时才计算，而媒体查询需解析时静态确定；断点变量仅适用于calc()等支持var()的声明，媒体查询仍需写死像素值或借助构建工具。
不能直接用 var(--breakpoint-md) 写在 @media 里——浏览器会忽略整条规则，断点完全不生效。
为什么 @media (min-width: var(--bp-md)) 是无效语法
CSS 自定义属性是运行时变量，但 @media 查询是解析时（parse time）就需确定条件的语法结构。浏览器在构建样式表阶段必须能静态判断媒体查询是否合法，而 var() 的值只有计算后才可知，所以该写法被规范明令禁止。
- 开发者工具里这条
@media规则会变灰，鼠标悬停提示 “Invalid CSS property value” - 哪怕
:root已正确定义了--bp-md: 768px，也无法绕过这个限制 - 这不是兼容性问题，而是所有现代浏览器（Chrome/Firefox/Safari/Edge）统一执行的规范行为
那 :root 里定义断点还有用吗
有用，但用途很明确：只用于 calc()、width、padding 等支持 var() 的声明位置，不能越界到媒体查询中。
- 可安全使用：
width: calc(100vw - var(--bp-md));、margin-left: var(--spacing-sm); - 不可使用：
@media (min-width: var(--bp-md))、@container (width > var(--bp-md)) - 如果项目同时用 CSS 变量 + 媒体查询，必须保留两套来源：变量管尺寸计算，
@media仍得写死像素值或靠构建工具注入
真正可行的“统一管理”方案（纯 CSS 场景）
纯 CSS 没有编译期能力，所谓“统一”，只能靠人工约定 + 工具辅助校验，而非自动同步。
立即学习“前端免费学习笔记（深入）”；
- 在
breakpoints.css中只放注释和:root定义，例如：:root { --bp-xs: 0; --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; } - 确保这个文件在所有其他 CSS 文件之前加载（
<link>顺序不能错） - 在 JS 中读取断点时，用
window.matchMedia("(min-width: 768px)")而不是硬编码getComputedStyle(document.documentElement).getPropertyValue("--bp-md") - 用 ESLint 或 stylelint 插件（如
stylelint-no-unknown-custom-media）扫描项目中是否出现未声明的断点值
更现实的工程选择：别强求纯 CSS 实现
如果你需要真正的变量复用和逻辑封装，CSS 自定义属性不是为此设计的。这时候该让位给构建时方案：
- Sass/Less：用
@use "variables"+@mixin media-up($bp)，变量参与编译，输出干净像素值 - PostCSS：配合
postcss-custom-media，写@custom-media --md (min-width: 768px)，再在任意文件里用@media (--md) - Tailwind 类型工具链：断点本身就是配置项，改
theme.screens一处，全项目类名自动更新
强行用 var() 管断点，最后往往变成注释里写一套、@media 里写另一套，反而增加出错概率。
