CSS变量在媒体查询中修改:root生效的前提是变量在使用处能被重新计算，需确保所有依赖变量的样式规则置于媒体查询内或保证选择器可重匹配，且默认:root必须定义基础值。
媒体查询里直接改 :root 变量不生效？因为作用域没覆盖到
CSS 自定义属性（即 CSS 变量）是级联的，不是“全局可写”的。你在 @media 里对 :root 设置新值，只有当该媒体查询匹配时才会应用——但关键在于：**必须确保变量在使用处能被重新计算**。常见错误是把变量用在了媒体查询外的静态规则里，结果变量变了，样式却没重算。
实操建议：
- 所有依赖变量的样式规则，必须放在媒体查询内部，或确保其选择器能被重新匹配（比如用
.theme-dark类切换不如用@media (prefers-color-scheme: dark)配合:root更新） - 避免在
:root外层一次性定义全部变量；改为按需在每个@media块里完整声明该断点下需要的变量集 - 变量名保持一致，只变值，不要在不同媒体查询里用不同变量名模拟同一语义（比如
--gap-sm在移动端设8px，桌面端设16px，而不是另起--gap-lg）
@media 中重复声明 :root 是安全且推荐的做法
很多人担心多次写 :root 会冲突或覆盖出错，其实不会。:root 就是个选择器，每次媒体查询匹配时，它里面的声明都会参与级联计算，后匹配的会自然覆盖前匹配的（前提是同优先级、同作用域）。
示例：
:root {
--spacing-unit: 4px;
--font-size-base: 16px;
}
<p>@media (min-width: 768px) {
:root {
--spacing-unit: 8px;
--font-size-base: 18px;
}
}</p><p>@media (min-width: 1200px) {
:root {
--spacing-unit: 12px;
--font-size-base: 20px;
}
}</p><p>.card {
padding: calc(var(--spacing-unit) <em> 2) calc(var(--spacing-unit) </em> 3);
font-size: var(--font-size-base);
}</p>
这段代码中，.card 的 padding 和 font-size 会随屏幕宽度自动响应，无需额外类名或 JS 干预。
变量复用要注意计算时机和 fallback 值
CSS 变量的 var(--name, fallback) 中的 fallback **只在变量未定义时生效**，而不会在媒体查询未匹配时兜底。也就是说，如果你只在 @media (min-width: 768px) 里定义了 --spacing-unit，那么小屏下 var(--spacing-unit) 就是无效值，导致样式断裂。
所以必须保证：每个变量在默认（无媒体查询）的 :root 中有基础值。
- 基础值要选最常用于最小断点的尺寸，比如移动端优先，
--spacing-unit: 4px写在最外层:root - 媒体查询中只覆盖需要变化的变量，不用全量重写（但建议初学者先全写，避免遗漏）
- 涉及
calc()的变量，注意单位一致性——var(--gap) * 2要求--gap本身带单位（如8px），不能是纯数字
复杂布局下别硬扛，该抽组件就抽组件
当变量组合开始出现“这个断点下按钮用 A 字体大小 + B 圆角 + C 阴影，下一个断点全换一套”，说明已超出变量管理的舒适区。CSS 变量适合控制原子级参数（间距、色值、基础字号），不适合封装整套视觉模式。
这时更稳妥的做法是：
- 用媒体查询包裹整套组件规则，比如
@media (min-width: 768px) { .btn { padding: 12px 24px; border-radius: 6px; } } - 变量只用来驱动其中可变部分，比如
border-radius: var(--radius-md);，而--radius-md本身由媒体查询控制 - 避免嵌套过深的
calc(var(--a) + var(--b))，浏览器解析可能丢精度，尤其涉及 rem/vw 混用时
变量复用的边界很实在：它省的是重复写数值，不是替代响应式结构设计。一旦发现要为每个断点维护十几条变量映射，就该停下来想想是不是该用 class 切换了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
