应将css变量定义在:root下，媒体查询内仅覆盖变量值，样式规则中用var()调用；适合抽离字号、行高、间距等系统性变化的值，避免抽display等开关式属性。

直接用 :root 定义变量，媒体查询里只改值，样式规则中统一用 var() 调用——这是唯一真正减少重复的路径。其他方式只会让问题更隐蔽。

为什么不能在媒体查询里定义变量

变量写在 @media 内部，作用域就仅限于该查询块，外部样式无法访问，var(--spacing-md) 在非断点区域会 fallback 到默认值甚至失效；更麻烦的是，多个媒体查询之间变量互不感知，你得反复声明同一组变量名，反而加重重复。

• 错误写法：@media (min-width: 768px) { :root { --font-size-body: 18px; } } —— 看似合理，但若页面顶部有个未包裹在媒体查询里的 h1 提前用了这个变量，它会拿到最新值，而非你预期的“默认值”
• 正确做法：所有变量必须在顶层 :root 声明，媒体查询只做覆盖
• IE 全系不支持 CSS 变量，如需兼容，得另配方案（比如 PostCSS 插件或预处理器）

哪些值适合抽成响应式变量

优先抽那些随屏幕尺寸系统性变化的值，比如字号、行高、间距单位、容器最大宽；避免抽 display 或 position 这类开关式属性——它们不是渐进调整，而是状态切换，用变量反而模糊语义。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐：--font-size-body、--space-unit、--max-width-container
• 不推荐：--is-hidden、--has-sidebar —— 这类布尔型控制应交由 class 切换
• 数值类变量必须带单位：--space-unit: 0.25rem; ✅，--space-unit: 4; ❌（后续 calc(var(--space-unit) * 2) 会失败）

如何避免变量覆盖引发的意外重绘

媒体查询里修改 :root 变量，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片上，肉眼可见闪烁。

• 深色模式等高频切换场景，别依赖 @media (prefers-color-scheme: dark) 直接覆盖变量
• 改用 html.theme-dark class 控制：.theme-dark { --bg: #1e1e1e; --text: #eee; }
• 配合 transition: background-color 0.2s 实现平滑过渡
• 注意变量求值时机：变量值在使用处计算，不是定义处；一旦被改写，全局生效，除非显式重置

真正难的不是写对变量，而是判断哪些值值得抽、哪些不该动——比如一个按钮的 padding 和 font-size 是否该联动缩放？这取决于设计系统的约束逻辑，而不是技术能不能做到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！