仅靠media query无法阻止background-image资源全部加载，因声明存在即触发请求；需用媒体查询内定义CSS变量实现按需声明，再通过url(var(--img-url))引用，避免全局默认值导致冗余加载。
background-image响应式切换为什么不能只靠media query？
因为图片资源仍会全部加载，哪怕被@media隐藏——浏览器不关心CSS是否生效，只要background-image声明存在，就发起请求。真要节省带宽，得让不同尺寸下“声明本身”就不同。
用CSS变量 + calc()动态拼接URL可行吗？
不行。calc()不能参与url()字符串拼接，以下写法会直接失效：
background-image: url('img/' + calc(100vw > 768px ? 'large.jpg' : 'small.jpg'));
这是语法错误，CSS不支持运行时字符串分支。必须靠外部机制（如HTML class、JS注入或媒体查询兜底）触发变量变更。
最简可靠的方案：媒体查询 + CSS变量作用域隔离
把变量定义在@media块内，让不同断点下的--img-url值真正不同，再统一用background-image: url(var(--img-url));引用。关键点是变量必须「按需定义」，而非全局默认赋值。
立即学习“前端免费学习笔记（深入）”；
- 避免写
:root { --img-url: "fallback.jpg"; }——这会导致fallback图总被加载 - 每个
@media里单独定义--img-url，不设默认值 - 确保父容器有
background-size: cover等基础样式，否则切换后可能拉伸错位
示例：
@media (max-width: 768px) {
.hero { --img-url: "hero-mobile.jpg"; }
}
@media (min-width: 769px) {
.hero { --img-url: "hero-desktop.jpg"; }
}
.hero {
background-image: url(var(--img-url));
background-size: cover;
}
如果需要更多切换条件（比如DPR、prefers-reduced-motion），怎么办？
CSS变量可以叠加媒体查询，但要注意优先级和加载逻辑：
-
prefers-reduced-motion应放在最后，覆盖前面的尺寸规则，避免动画图被意外加载 - 高DPR设备（
resolution: 2dppx）需配合image-set()更稳妥，单靠变量+url()无法自动选更高清资源 - 不要试图用
var(--img-url)嵌套image-set()——image-set()不接受变量，必须硬编码
所以混合场景下，变量适合做「主干切换」（如移动/桌面），细节优化（DPR、动效偏好）得另配image-set()或JS兜底。
真正难的是资源预判——CSS变量本身不触发懒加载，也不感知图片是否已缓存。如果对首屏性能敏感，还是得回到<picture></picture> + srcset，CSS背景图更适合装饰性、非核心内容。
