CSS变量不能用于@media条件，因规范只接受字面量；正确做法是在媒体查询内重设变量值，注意作用域、单位统一及层叠时机。
var() 不能直接放进 @media 条件里，浏览器会静默丢弃整条规则。想靠 CSS 变量做响应式，核心不是“把变量塞进断点”，而是“在断点里重设变量值”。
为什么 @media (min-width: var(--sm)) 一定失效
CSS 规范禁止变量参与媒体查询计算，它只认字面量，比如 768px 或 1024px。你写的那行代码根本不会被解析，不是值没传过去，是语法不合法、直接跳过。
- Chrome、Firefox、Safari 全部一致行为，没有例外
- DevTools 的 Styles 面板里也看不到这条规则，不是隐藏了，是压根没加载
- 别试
calc(var(--sm))或env(--sm)，同样无效
正确做法：在 @media 块里修改 :root 或局部选择器下的变量
变量得“改给对的人看”。全局响应就改 :root；只影响卡片间距，就只在 .card 里重设。
- 全局缩放：
@media (min-width: 768px) { :root { --font-size-base: 1rem; --gap: 1.5rem; } } @media (min-width: 1024px) { :root { --font-size-base: 1.125rem; --gap: 2rem; } } - 局部控制（更安全）：
.card { --gap: 1rem; } @media (max-width: 767px) { .card { --gap: 0.75rem; } }这样不会污染其他组件 - 避免在
:root里设默认图片 URL：--img-url: "fallback.jpg"会导致 fallback 图片提前加载；应只在对应断点内声明：@media (min-width: 768px) { :root { --img-url: "large.jpg"; } }
用 clamp() 实现流体缩放时的单位陷阱
clamp() 本身不接受变量作参数，但可以靠 calc() 拆解。最容易翻车的是单位混用。
立即学习“前端免费学习笔记（深入）”；
- 错：
font-size: clamp(var(--min), calc(var(--min) + var(--slope) * 1vw), var(--max));—— 如果--min是1rem，--max却是24px，旧版 Safari 会计算失败 - 对：统一用
rem或统一用px，且确保calc()里所有项单位兼容，例如1rem + 2vw合法，1rem + 2px在部分环境报错 -
clamp()的三个参数必须可比较，不能一个带单位一个不带，也不能混用em和rem作基准
真正容易被忽略的点：变量重设的**作用域链**和**层叠时机**。你在 @media 里改了 :root 的 --gap，但某个子组件用了 inherit 或 unset，它可能根本收不到新值；或者你忘了清除旧的 inline style，它会强制覆盖 CSS 变量。这些都不是语法错误，而是运行时表现偏差，调试起来比 JS bug 还难定位。
