浏览器只认第一个匹配的，写错顺序或漏掉就会静默回退到fallback图；media必须是合法媒体查询且按宽屏到窄屏顺序排列，sizes和srcset仅在上生效，type需服务器正确返回content-type。
浏览器只认第一个匹配的 <source></source>，写错顺序或漏掉 <img> 就会静默回退到 fallback 图，而不是“智能选最优”。
media 属性必须完整、顺序决定结果
浏览器从上到下扫描 <source></source>，遇到第一个 media 返回 true 就立即加载对应资源，后面的全跳过。这不是多选，是短路匹配。
-
media值必须是合法媒体查询：(max-width: 768px)✅，max-width: 768px❌（缺括号），768px❌（不是媒体查询） - 断点别重叠：
(max-width: 768px)和(min-width: 768px)在 768px 宽时都为真，但浏览器只取前者，行为不可控 - 宽屏规则放前面，窄屏兜底放最后：比如
(min-width: 1440px)→(min-width: 768px)→(max-width: 767px)
srcset 和 sizes 只在 <img> 上起 DPR 或宽度匹配作用
<source></source> 的 srcset 不支持 x 描述符（如 2x），它只按 media 或 type 匹配后取第一个资源；DPR 适配和 w 宽度计算必须交给最外层的 <img> 标签。
- 想按设备像素比加载（如 Retina 屏用 @2x）：把
2x写在<img srcset="a.jpg 1x, a@2x.jpg 2x">里，<source></source>中写2x会被忽略 - 想按页面中图片渲染宽度加载（如移动端占满屏、桌面固定 400px）：用
w描述符 +sizes，且sizes必须写在<img>上，例如sizes="(max-width: 600px) 100vw, 50vw" -
sizes值必须和实际 CSS 布局一致，否则浏览器预估尺寸偏差，可能加载过大或过小的图
type 属性需要服务器配合，否则静默失败
<source type="image/webp"></source> 不是“浏览器自动转格式”，而是靠服务器返回正确的 Content-Type 响应头。不匹配就跳过该 <source></source>，不会报错，也不会提示。
- 如果服务器返回
Content-Type: text/plain，Chrome 会标记为blocked:mime-type，这条<source></source>直接失效 - WebP 降级要靠顺序：把
type="image/webp"的<source></source>放 JPEG 前面，浏览器支持就走 WebP，不支持才往下找 - 所有
<source></source>都不匹配时，浏览器静默回退到<img src>，不会抛异常
漏掉 <img> 或没写 src 就会留白
<picture></picture> 本身不渲染任何内容，它只是调度容器。没有 <img>，或者 <img> 缺 src，整个区域就是空白——不是报错，是静默失败。
- 必须存在
<img>，且带src和alt；它是 fallback，也是语义化必需 - 即使你写了多个
<source></source>，只要它们的media全部不满足（比如断点设成(min-width: 2000px)但用户屏幕只有 1920px），就会直接走<img src> - 不要在
<source></source>里写sizes：它被完全忽略，只在<img>上有效
真正容易被忽略的是：浏览器不做“综合判断”，只做“顺序扫描+第一个命中”。所有“为什么没切图”的问题，90% 出在 media 写错、type 服务端不配合、或忘了给 <img> 写 src。调试时优先检查这三项，比查兼容性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
