如何用CSS自定义属性统一管理响应式断点

答案是否定的。CSS 变量不能直接用于 @media 查询条件，因为规范要求媒体特性里的值必须是可直接解析的字面量，而 var() 在这一解析阶段还没有完成计算，因此浏览器通常会静默忽略整条规则。实际开发中，常见且真正可落地的方案主要只有三种：@custom-media、预处理器替换，以及在 :root 中统一重设断点。

为什么直接写 @media (min-width: 768px) 不利于维护

如果响应式断点分散写在不同模块和样式文件中，后期维护成本会非常高。只要某个尺寸需要调整，通常就得全局搜索并逐一替换；一旦设计稿更新，原本的 768px 可能要改成 784px，但凡有一个 @media 规则没有同步修改，就可能出现 iPad 竖屏下导航栏本该折叠却没有折叠的情况。排查这类响应式布局问题，几乎就像沿着电路去寻找断线点一样费时。若使用 CSS 自定义属性统一管理断点，只需修改一次，相关样式和逻辑就能同步生效，维护效率会高很多。

--breakpoint-md 必须声明在 :root 里才可跨文件使用

很多开发者会把变量定义在某个组件的 :host 或局部 div 中，结果导致 JavaScript 无法稳定读取，@media 中也无法正常引用。更推荐的写法是：

:root {
--breakpoint-sm: 320px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
}

• 必须使用 :root，而不是 html 或其他选择器（不同环境下兼容性存在差异）
• 断点值必须带单位，768 是无效的，只有 768px 才是合法写法
• 不建议使用 rem 或 em，因为媒体查询中的这类单位会受到根字体大小影响，容易让响应式断点行为变得不稳定

@media (min-width: var(--breakpoint-md)) 的兼容性与限制

这种写法在 Chrome 112+、Firefox 110+、Safari 16.4+ 中已经支持，但依然存在明显限制：

• 不能用于 @container 查询，像 @container (min-width: var(--breakpoint-md)) 会直接报语法错误
• 无法参与计算，例如 calc(var(--breakpoint-md) - 1px) 在媒体查询场景中并不被允许
• 如果项目还需要兼容 Safari 15.x 或旧版 Edge，仍然需要回退到传统写法，再配合构建阶段替换方案（如 PostCSS 插件）
• 在 JS 中可通过 getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md') 安全读取断点值，相比直接硬编码字符串更稳妥，也更适合统一管理响应式断点

配合 JS 做逻辑响应时，别重复定义断点

开发中一个很常见的错误，是 CSS 里定义了一套 --breakpoint-md，而 JS 里又单独写了一个 const MD_BREAKPOINT = 768。这样做的风险在于，一旦设计尺寸调整，CSS 和 JS 很容易不同步。更合理的方式是只在 CSS 中维护断点，再由 JS 动态读取：

const mdQuery = window.matchMedia(
`(min-width: ${getComputedStyle(document.documentElement)
.getPropertyValue('--breakpoint-md')
.trim()})`
);

这里的 .trim() 很关键——CSS 变量值前后可能包含空格，如果不先清理，matchMedia 就可能解析失败。这类细节很容易被忽视，但一旦出错，响应式监听就会完全失效。