应将CSS变量定义在:root下，媒体查询内仅覆盖变量值，样式规则中用var()调用；适合抽离字号、行高、间距等系统性变化的值，避免抽display等开关式属性。
媒体查询里反复写同一组样式，怎么抽成变量
直接用 :root 定义 CSS 变量，再在各断点里覆盖对应变量值，媒体查询内只写一次样式规则，靠变量驱动变化。
常见错误是把变量定义在媒体查询内部——这样变量作用域受限，外部样式无法复用；或者用 var(--color) 但没在对应断点里重新赋值，导致样式没变。
- 变量必须声明在
:root或全局选择器下，确保所有上下文可访问 - 每个媒体查询只需改变量值，不用重复写
color、font-size等整套声明 - 注意变量名语义化，比如
--spacing-md比--s2更易维护
:root {
--font-size-body: 16px;
--line-height-body: 1.5;
}
@media (min-width: 768px) {
:root {
--font-size-body: 18px;
--line-height-body: 1.4;
}
}
p {
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
哪些样式适合抽成响应式变量
优先抽那些随屏幕尺寸系统性变化的值：字号、行高、间距（margin/padding）、容器最大宽、栅格列数控制类属性。
不适合抽的包括：仅某个断点独有的装饰性样式（如某屏下加个背景图）、依赖 JS 动态计算的值、或浏览器不支持 CSS 变量的旧环境（IE 全系不支持）。
立即学习“前端免费学习笔记（深入）”；
- 字号/行高/字重：适配阅读体验，变化频率高
- 间距单位（
--space-xs到--space-xl）：让margin和padding保持比例一致性 - 避免抽
display或position这类结构性属性——它们往往不是“渐进调整”，而是开关式切换
变量覆盖顺序和继承陷阱
CSS 变量遵循级联规则，但容易误判“哪里生效”。关键点：变量值在使用处求值，不是定义处；且媒体查询内的 :root 覆盖会立即影响后续所有用到该变量的规则。
典型翻车场景：在 @media (max-width: 480px) 里改了 --font-size-body，但页面顶部有个未包裹在媒体查询里的 h1 样式提前用了这个变量——它会拿到最新值，而非你预期的“默认值”。
- 变量覆盖没有“回退”机制，一旦被改写，全局生效，除非再显式重置
- 如果需要局部隔离，改用组件级自定义属性（如
.card { --card-padding: 1rem; }），避免污染根作用域 - 调试时用浏览器开发者工具的“Computed”面板，看
var(--x)最终解析成了什么值，比猜靠谱
兼容性和 fallback 怎么处理
Chrome 49+、Firefox 31+、Safari 9.1+ 支持 CSS 变量；IE 完全不支持，Edge 15+ 开始支持。纯靠变量驱动的响应式方案在 IE 下会直接失效——变量不识别，var(--x) 当作无效值，回退到初始值或继承值。
- 对必须兼容 IE 的项目，别用变量替代全部媒体查询，而是用变量辅助非核心样式（如主题色），保留关键断点逻辑在媒体查询内
- 可以写 fallback：
font-size: 16px; font-size: var(--font-size-body);，前面是兜底，后面是增强 - 注意：fallback 只对属性值有效，不能 fallback 整条规则或选择器
真正麻烦的不是语法写法，而是团队里有人在变量名里混用 px 和 rem 单位，或者把响应式变量和主题变量放在同一个命名空间里，结果改暗黑模式时顺手把移动端字号也调崩了。
