CSS变量不能直接用于@media断点，因规范禁止变量参与媒体查询条件计算，浏览器会静默丢弃整条规则；必须通过:root定义并配合媒体查询重设变量值，或借助构建工具替换、@custom-media封装、JS动态控制等间接方式实现。
为什么不能在@media里直接用var()写断点
浏览器根本不允许 @media (min-width: var(--sm)) 这种写法，整条规则会被静默丢弃。CSS 规范明确禁止变量参与媒体查询条件计算——它只认字面量值，比如 768px 或 1024px。你看到的“变量失效”，其实是语法被忽略，不是值没传过去。
重写变量必须限定作用域和时机
关键不是“能不能改”，而是“改给谁看”。:root 是全局作用域，但如果你在某个组件内部（比如 .card）里定义了 --gap，而媒体查询还在 :root 里改它，那 .card 根本收不到新值。
- 想让整个页面响应，就在
@media块里修改:root下的变量 - 只想局部响应，比如只调卡片间距，就该在
@media内针对.card选择器重设--gap - 避免在
:root里给变量设默认 URL 或图片路径，否则 fallback 图片会提前加载
流体缩放别硬套变量进clamp()
clamp() 本身不接受变量作为参数，但可以靠 calc() 拆解参与计算。常见翻车点是单位混用或漏掉基准值：
- 错：
font-size: clamp(var(--min), calc(var(--min) + var(--slope) * 1vw), var(--max));—— 如果--min是1rem、--max是1.5rem，没问题；但若--max是24px，旧版 Safari 可能计算失败 - 对：统一用
rem或统一用px，且确保calc()里所有项单位兼容（1rem + 2vw合法，1rem + 2px在部分环境报错） - 注意：Chrome 119+ 支持容器查询，比 viewport 缩放更精准，但得配合
container-type: inline-size，光靠变量没用
图片切换必须让声明“按需存在”
仅靠 @media 隐藏 background-image 不阻止请求——只要样式表里写了 url(...)，浏览器就会加载。真正起效的方式是：不同断点下，让 --img-url 的声明本身只出现在对应媒体查询内。
立即学习“前端免费学习笔记（深入）”；
- 不要：
:root { --img-url: "fallback.jpg"; }—— fallback 图永远加载 - 要：
@media (min-width: 768px) { :root { --img-url: "large.jpg"; } }和@media (max-width: 767px) { :root { --img-url: "small.jpg"; } } - 然后统一用
background-image: url(var(--img-url));，没有默认值，就没有冗余请求 - 别试图用
calc()拼接 URL，url('img/' + calc(...))是非法语法，CSS 不支持运行时字符串操作
实际生效的关键，往往不在变量怎么写，而在它是否真的被读取——作用域错一层、默认值多一句、单位混一格，都可能让响应逻辑彻底失效。
