CSS变量本身不响应，需在@media中对:root重复赋值才能触发变化；变量名应语义化如--spacing-sm；初始值设移动端默认，断点内显式覆盖；calc()要求单位完整；IE不支持，需PostCSS降级；断点值不能用于@media条件。
如何在:root里定义响应式CSS变量
直接在 :root 中声明变量，是全局生效的基础。但注意：变量本身不响应，必须配合媒体查询重新赋值才能触发变化。
- 变量名推荐用语义化前缀，比如
--spacing-sm、--font-size-body，避免裸名如--s1 - 初始值建议设为移动断点下的默认值（如
1rem），后续在@media中覆盖 - 不能在媒体查询外用
var(--x)引用尚未声明的变量——浏览器会按顺序解析，未定义即 fallback 或无效
媒体查询中重设CSS变量的写法和时机
媒体查询不是“监听”，而是静态匹配。只要断点条件满足，内部的 :root 变量就会被重写，所有引用该变量的样式自动更新。
- 必须写在
:root选择器内，例如：@media (min-width: 768px) { :root { --font-size-body: 1.125rem; } } - 不要试图在组件级选择器（如
.card）里改:root变量——无效，作用域不对 - 多个断点间变量值需显式覆盖，CSS不会“继承”上一个断点的值；漏写某个断点可能导致回退到根初值（比如桌面端没设
--spacing-md，就还是用移动端的1rem）
变量嵌套引用与计算时的常见报错
用 calc() 或嵌套变量时，容易因类型或顺序出错，浏览器静默失败而非报错。
-
calc(var(--gap) * 2)要求--gap是带单位的值（如0.5rem），纯数字0.5会计算失败 - 不能跨媒体查询链式引用未定义变量，比如在
max-width: 480px查询里用了var(--color-primary)，但该变量只在min-width: 768px中定义——此时取不到值 - 变量名大小写敏感：
--Color和--color是两个变量，别混用
实际项目中容易被忽略的兼容性细节
CSS变量在 IE 完全不支持，哪怕加了 fallback 值，IE 也会跳过整条声明。现代项目若需兼容旧版 Edge（≤17），得额外处理。
立即学习“前端免费学习笔记（深入）”；
- PostCSS 插件（如
postcss-custom-properties）可将变量编译为静态值，但仅适用于构建时已知的常量；动态值（如 JS 注入的变量）无法编译 - 用 JS 动态设置变量（
document.documentElement.style.setProperty()）时，媒体查询里的重设仍会覆盖它——除非你主动在 JS 里监听resize并同步更新，但这通常没必要 - 设计系统中建议把断点变量也抽成 CSS 变量（如
--breakpoint-md: 768px），但注意：它不能直接用于@media条件中，@media (min-width: var(--breakpoint-md))是无效语法
变量本身没有“响应性”，只有“被重写后触发重计算”这一条路径。很多人卡在以为写一次就能自动适配，其实关键动作永远落在媒体查询对 :root 的反复赋值上。
