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() 的声明位置，不能越界到媒体查询中。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 可安全使用：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 里写另一套，反而增加出错概率。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！