CSS变量接管响应式需明确作用域：全局参数定义在:root，组件参数定义在组件选择器；媒体查询中修改对应作用域变量才生效；断点值不可用var()，须硬写；clamp()实现流体缩放需单位兼容；JS动态修改要节流并注意样式树重算。
直接用 CSS 变量接管响应式参数，比在每个媒体查询里重复写样式更可靠、更易维护。关键不是“能不能用”，而是变量该定义在哪、怎么改、改了之后哪些地方会跟着变。
变量必须定义在 :root 或具体作用域，否则媒体查询改了也白改
媒体查询里修改变量，只对它能触达的作用域生效。常见错误是：在 .card 里定义了 --gap，却在 @media 中去改 :root 下的同名变量——卡片根本读不到新值。
- 全局统一参数（如字体、间距、断点）放
:root，媒体查询中也改:root - 组件级可变参数（如卡片内边距、网格列数）定义在组件选择器上，媒体查询中对应改那个选择器
-
@media (min-width: 768px) { .grid { --grid-cols: 3; } }这样才有效，:root里没定义--grid-cols也没关系
媒体查询不能用 var() 当条件，但可以靠变量控制内部样式
@media (min-width: var(--sm)) 是无效语法，浏览器直接忽略整条规则。CSS 变量不参与媒体查询计算，只参与样式计算。
- 断点数值仍需硬写：
@media (min-width: 768px)，但里面可以放心改--font-size-base、--gap等变量 - 想集中管理断点？用构建工具（如 PostCSS 插件）把
var(--sm)替换为768px，前提是变量值是静态常量 - 真正动态的断点判断（比如根据容器宽度）得靠
@container查询，配合变量做内部调整
用 clamp() + 变量实现流体缩放，别漏单位兼容性
想让字号或 padding 随视口平滑变化，而不是在几个断点间“跳变”，就得组合 clamp() 和变量，但单位混用容易失效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
font-size: clamp(var(--fs-min), calc(var(--fs-min) + var(--fs-slope) * 1vw), var(--fs-max)); -
calc()里所有值单位必须兼容：1rem + 2vw合法，1rem + 2px在旧版 Safari 会失败 - 变量本身不能是表达式：
--fs-min: calc(1rem)可以，但--fs-min: calc(100% - 2rem)在部分场景下可能无法被clamp()正确解析
JS 动态改变量时，高频更新要节流，尤其在 scroll/mousemove 里
用 element.style.setProperty('--var', value) 改变量本身很快，但若这个变量被多个属性引用（比如同时控制 font-size、padding、gap），浏览器要重算整块样式树，频繁触发照样卡。
- 滚动中实时更新
--scroll-y？务必包一层requestAnimationFrame - 批量设多个变量，
Object.entries(vars).forEach(([k, v]) => el.style.setProperty(k, v))和逐个调没本质区别，性能瓶颈不在调用次数，而在变量被多少样式依赖 - 读不到变量值？先用
getComputedStyle(el).getPropertyValue('--my-var')检查返回是否为空——90% 是作用域错或拼写错（--my-var写成-my-var或my-var都无效）
最易被忽略的其实是变量作用域和计算时机：媒体查询改了变量，但元素样式里没用 var(--x) 引用它，或者用了但父级没继承到，结果什么都没变。变量只是传值的管道，真正起效靠的是被引用的位置和时机。
