必须用合法CSS媒体查询写<source>的media属性，覆盖常见断点并以带src的<img>作fallback；media非法、顺序错、无sizes/srcset或服务器MIME配置错误均会导致图片加载失败。
直接结论：用 <source> 的 media 属性写合法 CSS 媒体查询，按视口宽度分段声明图片源，顺序从宽到窄或窄到宽都行，但必须覆盖常见断点，且末尾必须有带 src 的 <img> 作为 fallback——否则不匹配时页面留白。
为什么写了 media 却只加载一张图？
不是浏览器“没切换”，而是匹配逻辑根本没触发：
-
media="max-width: 768px"缺括号 → 浏览器静默忽略整个<source>，不报错也不加载 -
media="768px"或media="mobile"→ 非法媒体查询，该<source>彻底失效 - 所有
<source>的media都不为真 → 浏览器默默 fallback 到<img src>，你根本看不到提示 -
<source>写在<img>后面 → 浏览器直接跳过，只加载<img>
media 值怎么写才靠谱？
必须是完整、合法的 CSS 媒体查询，且断点要和你的实际布局对齐：
- 推荐移动优先写法：
media="(max-width: 480px)"→media="(min-width: 481px) and (max-width: 768px)"→media="(min-width: 769px)" - 避免边界重叠：不要同时用
(max-width: 768px)和(min-width: 768px)，768px 宽度行为不可控 - 桌面端断点别硬套“1200px”：如果你的容器最大宽度是 1140px，配
min-width: 1200px就永远不命中 - 折叠屏或横屏 PC 可加过滤：
media="(orientation: landscape) and (max-height: 700px)"防止小屏横置误判
sizes 和 srcset 不是可选项，尤其当你要适配高 DPR
仅靠 media 只能切固定尺寸图；要让同一断点下 Retina 屏自动加载 2x 图，必须配 srcset + sizes：
立即学习“前端免费学习笔记（深入）”；
-
sizes只能写在<img>上，写在<source>里会被忽略 - 如果用了
w描述符（如"photo-400w.jpg 400w, photo-800w.jpg 800w"），sizes是必填项，否则浏览器无法计算该加载哪张 - 典型写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，必须和 CSS 中该图片容器的实际宽度逻辑一致 -
srcset里别混用w和x：同时出现photo-800w.jpg 800w, photo@2x.jpg 2x会让整个值被浏览器忽略
最容易被忽略的其实是服务器配置
就算 <source type="image/avif"> 写对了，如果 Nginx 或托管平台（如 GitHub Pages、Vercel 默认配置）没配 MIME 类型，浏览器收到的 Content-Type 是 text/plain 而非 image/avif，就会直接拒绝解析——Network 面板显示 404，其实根本不是路径问题。
