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

不能。CSS变量不能直接用于@media条件，因规范要求媒体特性值必须为字面量，var()在解析阶段尚未求值，浏览器会静默忽略整条规则；可行方案仅有@custom-media、预处理器代入、:root内重设三种。

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

断点值散落在各处，改一个尺寸就得全局搜索替换；设计稿调整后，768px 可能变成 784px，但你漏改了某个 @media 块，结果 iPad 竖屏下导航栏没折叠——这种问题调试起来像找断掉的电线。CSS 自定义属性能把它变成一次修改、全链路生效。

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

很多人把变量写在某个组件的 :host 或局部 div 里，结果 JS 读不到，@media 也引用失败。正确做法是：

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

1. 必须用 :root，不是 html 或其他选择器（兼容性有差异）
2. 值必须带单位，768 无效，768px 才合法
3. 不要用 rem 或 em，媒体查询中它们受根字体影响，行为不可控

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

这个写法在 Chrome 112+、Firefox 110+、Safari 16.4+ 支持，但仍有硬伤：

1. 无法用于 @container 查询（@container (min-width: var(--breakpoint-md)) 会报语法错误）
2. 不能参与计算，比如 calc(var(--breakpoint-md) - 1px) 在媒体查询中不被允许
3. 如果项目需支持 Safari 15.x 或旧版 Edge，得回退到传统写法 + 构建时替换（如 PostCSS 插件）
4. JS 中可通过 getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md') 安全读取，比硬编码字符串可靠得多

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

常见错误是 CSS 里写一套 --breakpoint-md，JS 里又写个 const MD_BREAKPOINT = 768。一旦设计调整，两头不同步。正确方式是只在 CSS 定义，JS 动态读取：

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

注意 .trim() —— CSS 变量值前后可能有空格，不清理会导致 matchMedia 解析失败。这点容易被忽略，但会导致监听完全不触发。