CSS变量在@media中直接定义无效，因无宿主选择器；必须绑定到:root等选择器才能生效，且需顶层预设默认值以避免未声明状态。
CSS变量在媒体查询里直接定义（比如 @media (max-width: 768px) { --primary: red; }）根本不会生效——它连“定义”都算不上，浏览器直接忽略整行，也不报错。
为什么@media块内单独写--var: value无效
媒体查询内部不是独立作用域，它只是条件包裹器；CSS变量必须绑定到一个选择器才能挂载到继承链上。单独写--primary: red没有宿主元素，等同于语法错误，浏览器跳过不解析。
- 必须配合选择器使用，最常用也最安全的是
:root（因为所有元素都继承它） - 写成
html { --primary: red; }勉强可行，但html不保证是变量继承根（某些 UA 可能不完全遵循），:root才是规范推荐 - 如果误写成
.container { --primary: red; }，那只有.container及其后代能读到这个值，媒体查询外的其他地方照样用不到
为什么先在:root声明默认值是硬性前提
变量没有“延迟初始化”或“按需回退”机制：var(--primary, #000)里的 fallback 只在--primary未被声明（not defined）时触发；而媒体查询不匹配时，--primary就是未声明状态——此时所有var(--primary)都会降级，且后续窗口缩放也不会自动刷新已计算样式。
- 顶层
:root { --primary: #007bff; }确保变量始终存在，避免 undefined 状态 - 媒体查询中的
:root { --primary: red; }本质是层叠覆盖，不是“修改”，所以必须和顶层同选择器、同特异性 - 如果只在小屏媒体查询里写
:root { --primary: red; }，桌面端打开页面时--primary压根没声明，getComputedStyle(document.documentElement).getPropertyValue('--primary')返回空字符串""，不是undefined，容易误判
@media中改:root变量后样式不更新？检查重绘时机
CSS变量变更后，依赖它的属性不会自动重算——浏览器只在样式重新计算周期（如 class 切换、DOM 变动、强制 reflow）时才重新求值var()。
立即学习“前端免费学习笔记（深入）”；
- 单纯缩放窗口触发媒体查询匹配，不会导致已有元素的
color: var(--primary)立刻变色 - 常见补救：给
body加一个 class（如js-media-updated），再在媒体查询块末尾加一条规则body.js-media-updated { animation: force-repaint 0.001s; } - 更轻量做法：监听
resize事件，在回调里执行document.documentElement.style.transform = 'scale(1)'（触发一次 layout） - 注意：不要在媒体查询里用
!important改:root变量——变量本身不支持!important，语法非法
断点值本身不能用变量？别试了，规范不许
@media (min-width: var(--bp-md))永远无效，不是兼容性问题，是 CSS 规范明确禁止——媒体特性值必须是字面量，var()属于运行时计算，解析阶段就被丢弃。
- DevTools 里这条
@media会显示为灰色禁用，但控制台零提示，极易忽略 -
@custom-media --md-up (min-width: 768px);是目前唯一原生可复用的方案，Safari 支持，Chrome/Firefox 需 PostCSS 插件转译 - Sass/Less 中用
$bp-md: 768px再@media (min-width: $bp-md)是编译期展开，和 CSS 变量无关，别混淆 - 如果坚持纯 CSS，只能接受重复写
768px，或者把断点值也作为:root变量，然后在每个@media块里手动重设对应样式（如:root { --spacing: 0.75rem; }），而非用于条件判断
真正容易被忽略的点在于：变量是否“已声明”和“是否被当前上下文继承”是两回事；:root是起点，不是保险箱——加载顺序、选择器优先级、甚至@import位置，都可能让变量在某个文件里“看似定义了，实则不可见”。
