CSS变量本身不响应，需配合@media在:root中按断点重定义值；移动端优先设默认值，再用min-width覆盖；语义化命名、避免重复覆盖；适用于设计系统，不适用单元素特殊响应。
怎么在:root里定义响应式CSS变量
CSS变量本身不响应，但可以配合媒体查询动态重写值——关键不是“让变量变”，而是“在不同断点下给变量赋不同的值”。:root是全局作用域，适合放基础变量；响应式逻辑必须靠@media块内覆盖。
- 别在
:root里直接写max-width: 768px这类条件，CSS变量不支持表达式 - 移动端优先：先设小屏默认值，再用
@media (min-width: 769px)覆盖大屏值 - 变量名保持语义，比如
--spacing-unit比--s1更易维护 - 避免重复覆盖：同一变量在多个
@media中被多次重定义，浏览器按规则流顺序应用，后写的生效
为什么用CSS变量做响应式比@media嵌套更可控
传统@media里重复写padding、font-size等声明，容易漏改或不一致；CSS变量把“值”抽离出来，一处修改，多处联动。但前提是变量被真正复用——如果只在一个选择器里用一次，反而增加理解成本。
- 适用场景：组件库主题、设计系统中的间距/颜色/字体比例体系
- 不适用场景：单页中某个按钮的特殊响应行为（此时直接
@media更轻量） - 性能无差异：变量解析是CSS引擎内部行为，和普通声明开销一致
- 兼容性注意：
var(--x)在IE完全不支持，需确认目标环境
常见错误：变量未生效或断点错乱
最常遇到的是变量值没更新，表面看是CSS变量问题，实际多为作用域或层叠顺序导致。
-
--color-primary在:root定义，但在.header里用color: var(--color-primary)却显示黑色——检查是否被其他color声明（如!important或更高优先级选择器）覆盖 - 断点切换时变量值不变：确认
@media查询条件匹配当前视口，且该@media块位于:root之后（否则不会覆盖） - 使用
calc(var(--gap) * 2)时出错：确保--gap有单位（如0.5rem），纯数字2不能和带单位值直接运算 - 构建工具（如PostCSS）可能提前静态替换
var()，导致响应式失效——关闭相关插件或确认其支持运行时变量
如何安全地在JS中读写响应式CSS变量
JS能读取计算后的变量值，但无法触发媒体查询重算——它读到的是当前视口下已生效的值。写入变量则会立即生效，绕过@media逻辑，慎用。
立即学习“前端免费学习笔记（深入）”；
- 读取：
getComputedStyle(document.documentElement).getPropertyValue('--spacing-unit')返回当前生效值（含单位） - 写入：
document.documentElement.style.setProperty('--spacing-unit', '2rem')会强制覆盖，可能破坏原有断点逻辑 - 监听视口变化：
window.matchMedia('(min-width: 769px)')可主动同步JS状态，但不要用它去手动重设CSS变量 - 避免在
resize事件里频繁读写变量——触发重排，影响性能
CSS变量做响应式管理的核心在于“变量是值的容器，媒体查询才是响应的开关”。最容易被忽略的是：你以为改了变量，其实只是改了一个静态快照；真正的响应，永远发生在媒体查询匹配的那一刻。
