CSS变量不能用于媒体查询条件，但可在查询后的声明块中复用，需在:root定义、确保var()引用、避免局部作用域和!important覆盖，calc()计算应统一放在:root。
用 --breakpoint-md 这类变量替代硬编码像素值
媒体查询里反复写 768px、1024px，改一个地方漏一个，后期维护成本高。CSS 变量本身不直接作用于媒体查询条件（@media (min-width: var(--breakpoint-md)) 是无效的），但可以把它用在查询 *之后* 的声明块里，把「断点逻辑」和「样式逻辑」解耦。
实操建议：
- 在
:root中定义断点变量，比如--breakpoint-sm: 480px、--breakpoint-md: 768px - 每个
@media块只写一次条件，内部用变量控制多个属性：font-size、padding、grid-template-columns等 - 避免在变量名里混用单位和语义，比如
--spacing-lg比--lg-padding更易复用
媒体查询中修改 CSS 变量值，触发批量重绘
很多人以为改了 --color-primary 就自动更新所有用了它的元素——确实如此，但前提是这些元素的样式规则里明确写了 color: var(--color-primary)。如果某处写死成 color: #3b82f6，变量再怎么变它也不动。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 在
@media块里只改了变量，但对应组件没用var()引用它 → 样式毫无变化 - 变量被定义在局部选择器下（如
.card { --gap: 1rem; }），而媒体查询在:root层级改它 → 不生效 - 使用了
!important覆盖变量值，导致后续媒体查询无法覆盖
推荐写法示例：
:root {
--font-size-base: 1rem;
}
@media (min-width: 768px) {
:root {
--font-size-base: 1.125rem;
}
}
.text {
font-size: var(--font-size-base);
}响应式字体大小：别用 clamp() 硬套，先看变量是否够用
clamp() 很方便，但不是万能解。它适合单属性渐进缩放，可一旦需要配合其他断点做「阶梯式跳变」（比如小屏用 14px，中屏切到 16px，大屏再切到 18px），用变量 + 媒体查询反而更可控、更易调试。
使用场景对比：
- 文字需要平滑缩放（如标题）→
clamp(1.25rem, 4vw, 2rem)可行 - 布局栅格列数变化（如
grid-template-columns: repeat(2, 1fr)→repeat(4, 1fr)）→ 必须用媒体查询 + 变量控制 - 深色模式 + 响应式叠加 → 变量命名需带上下文，比如
--bg-color-light-md，避免冲突
兼容性陷阱：Safari 14.5 之前不支持在 @media 内部用 calc() 计算变量
比如写 --spacing-unit: calc(var(--base-unit) * 2) 放在媒体查询块里，在旧 Safari 会静默失败，变量值变成 initial 或空字符串，最终渲染出乎意料。
实操建议：
- 所有
calc()表达式统一放在:root，不在媒体查询内嵌套计算 - 用开发者工具的「Computed」面板检查变量实际值，别只信「Styles」里的声明
- 如果必须动态计算，优先用 JS 注入变量（
document.documentElement.style.setProperty()），比纯 CSS 更可靠
变量不是银弹，它简化的是「值复用」，不是「逻辑抽象」。真正复杂的响应式行为，该拆媒体查询还是得拆，别指望一个 --is-mobile 变量包打天下。
