CSS变量不能用于媒体查询条件，因语法禁止；但可作为“状态出口”，通过getComputedStyle读取@media已生效后的变量值来同步断点状态给JS。
CSS变量不能直接用于媒体查询条件，但能作为“状态出口”把断点当前是否生效的信息同步给JS——关键在于用getComputedStyle读取计算后样式中变量的值，而不是指望@media (min-width: var(--breakpoint-md))这种写法能生效。
为什么@media (min-width: var(--breakpoint-md))会报错
CSS语法规定：媒体查询的条件部分（括号内）只接受字面量、数字、单位、逻辑运算符，不支持变量插值。浏览器解析时会直接忽略整个@media块，或抛出Invalid CSS property name类错误。这不是兼容性问题，是语法层面禁止。
所以别试图让CSS变量“驱动”媒体查询本身；它的作用是——在媒体查询已生效的前提下，把结果“反射”出来供JS感知。
用getComputedStyle监听断点切换
核心思路：在:root里定义一个语义化变量（如--breakpoint-active），每个@media块内单独设置它的值；JS通过getComputedStyle持续读取该值，即可知道当前匹配的是哪个断点。
立即学习“前端免费学习笔记（深入）”；
- 在CSS中这样写：
html {
--breakpoint-active: xs;
}
@media (min-width: 576px) {
html { --breakpoint-active: sm; }
}
@media (min-width: 768px) {
html { --breakpoint-active: md; }
}
@media (min-width: 992px) {
html { --breakpoint-active: lg; }
}
- JS里监听变化（推荐用
matchMedia+ 手动触发，而非轮询）：
function updateBreakpoint() {
const value = getComputedStyle(document.documentElement)
.getPropertyValue('--breakpoint-active')
.trim();
console.log('当前断点:', value); // 'md', 'lg'...
}
// 初始化
updateBreakpoint();
// 监听 resize（简单场景够用）
window.addEventListener('resize', updateBreakpoint);
// 更精准可结合 matchMedia，但需手动同步变量值
容易被忽略的坑：SSR和首次渲染时机
服务端渲染（SSR）时，getComputedStyle返回空对象，因为没有真实DOM和样式计算环境。此时读不到--breakpoint-active值。
- 服务端应默认返回一个兜底值（如
xs），或干脆不设初始值 - 客户端首次执行
updateBreakpoint()必须在DOMContentLoaded之后，否则document.documentElement可能还没挂载完整样式 - 若用
matchMedia监听，注意它返回的是MediaQueryList对象，其matches属性反映的是媒体查询是否匹配，但无法直接映射到语义名（如md），仍需靠CSS变量做桥梁
更健壮的写法：配合matchMedia主动同步变量
如果对精度要求高（比如动画帧内响应），不要依赖resize事件——它延迟高、触发频次不可控。改用matchMedia监听，并在回调里显式更新CSS变量：
const mediaQueries = [
['xs', '(max-width: 575.98px)'],
['sm', '(min-width: 576px) and (max-width: 767.98px)'],
['md', '(min-width: 768px) and (max-width: 991.98px)'],
['lg', '(min-width: 992px)']
];
mediaQueries.forEach(([name, query]) => {
const mql = window.matchMedia(query);
const update = () => {
document.documentElement.style.setProperty('--breakpoint-active', name);
};
mql.addListener(update);
update(); // 初始化
});
这种方式绕开了resize的抖动，也避免了SSR首次缺失的问题——变量由JS主动注入，且与媒体查询逻辑完全对齐。
真正复杂的地方不在怎么写，而在于你得意识到：CSS变量在这里只是个“信使”，不是“决策者”。断点逻辑必须由CSS媒体查询先完成判断，JS才能拿到结果。漏掉这层先后关系，就容易卡在“为什么JS读不到最新值”上。
