background-image 在 @media 中仍会预加载，因浏览器解析 CSSOM 时扫描所有 url()；可靠方案是按断点拆分 CSS 文件并用 <link media> 加载，或改用 <picture>+srcset。
background-image 在 @media 里根本不会“按需加载”——写进 CSS 的任何 url()，只要被浏览器解析到，就会立刻发起请求。
为什么 @media 包裹的 background-image 依然会预加载
Chrome DevTools 的 Network 面板能直接验证：哪怕你把 background-image: url("hero-1920.jpg"); 写在 @media (min-width: 1200px) { } 里，只要整个 CSS 文件被加载，这张图就大概率在首屏前就被取了。
- 浏览器解析 CSSOM 时会扫描所有
url()，不管它是否被媒体查询包裹 -
@media只影响样式计算和渲染输出，不影响资源获取生命周期 - 即使元素当前
display: none或不在视口内，图片仍会预加载 - 小屏用户加载了含桌面背景图的单个 CSS 文件，等于白下了一张 1920×1080 的图
真正阻止非目标尺寸背景图加载的方法
必须让图片 URL 只出现在当前设备匹配的 CSS 规则中，且该规则不被提前解析。目前最可靠、零 JS、全浏览器兼容的做法是：
- 把不同尺寸的背景图声明拆到独立 CSS 文件中，例如：
mobile-bg.css、tablet-bg.css、desktop-bg.css - 在 HTML
<head>中用<link rel="stylesheet" href="mobile-bg.css" media="(max-width: 767px)">等方式加载 - 确保每个文件只包含对应断点的
background-image声明，不混写其他尺寸的图 - 不要给这些
<link>加preload或prefetch，否则会绕过media判断逻辑 -
media属性值必须是有效媒体查询（如screen and (max-width: 767px)），漏掉screen and或拼错会导致样式完全不生效
<picture> + srcset 是内容型背景图的更优替代
如果所谓“背景图”本质是内容型图片（比如 banner、产品主图），优先改用 <picture>：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 1200px)" srcset="hero-1920.jpg"> <source media="(min-width: 768px)" srcset="hero-768.jpg"> <img src="hero-mobile.jpg" alt="Hero banner"> </picture>
-
<picture>能真正实现响应式资源选择，浏览器只下载匹配条件的那张图 - 支持
loading="lazy"，配合sizes还能进一步提升懒加载精度 - 语义清晰，对可访问性、SEO、打印样式都更友好
- 比 JS 动态设
background-image更轻量、更可靠
容易被忽略的细节
很多人以为把所有响应式规则塞进一个 CSS 文件再压缩就完事了，但实际瓶颈常藏在「加载时机」而非「文件大小」里。比如：
-
media值写成not all或(max-width:768px)（缺空格）会导致整条规则失效，而你可能在真机上才偶然发现 - 用
rel="preload"加载关键 CSS 时，若漏掉as="style"，浏览器会当普通资源处理，失去预加载意义 - 内联首屏 CSS 时混入
@import，会阻塞 HTML 解析，反而拖慢首屏
