不能。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;
}- 必须用
: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 动态读取：
立即学习“前端免费学习笔记（深入）”；
const mdQuery = window.matchMedia(
`(min-width: ${getComputedStyle(document.documentElement)
.getPropertyValue('--breakpoint-md')
.trim()})`
);注意 .trim() —— CSS 变量值前后可能有空格，不清理会导致 matchMedia 解析失败。这点容易被忽略，但会导致监听完全不触发。
