<picture>标签必须以<img>结尾且不可自闭合，该<img>是强制fallback，必须含src和alt属性；<source>顺序须从宽到窄、media语法须合法（如(max-width: 768px)），否则浏览器静默忽略或仅加载fallback图。
picture标签必须以<img>结尾且不可自闭合
浏览器把 <picture> 当作纯声明容器，真正渲染的只有末尾那个 <img>。漏掉它、写成 <img /> 或 <img>，整个区域会空白——连 404 都不报。
这个 <img> 必须同时带 src 和 alt，不能只写 alt 却空着 src。旧版 Safari（16.4 之前）完全依赖它渲染，缺了就是白屏。
-
<img src="fallback.jpg" alt="描述">✅ 正确 -
<img src="" alt="描述">❌ 空 src → 加载失败 -
<img alt="描述">❌ 缺 src → 白屏 -
<img />❌ 自闭合 → 不被识别
source顺序必须按匹配强度降序排列
浏览器从上到下扫描 <source>，遇到第一个 media 为 true 的就加载并停止，不会继续往下看。所以最具体、限制最强的规则必须放最前。
比如桌面高清屏需同时满足宽度和 DPR：写成 media="(min-width: 1200px) and (min-resolution: 2dppx)" 的 <source>，就得排在仅用 min-width 的前面；否则宽屏设备可能永远卡在更宽松的规则里。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐顺序：先
(min-width: 1200px) and (min-resolution: 2dppx)，再(min-width: 1200px)，最后(max-width: 767px) - ❌ 错误顺序：把
(max-width: 767px)放最前 → 所有小屏都命中，大屏规则永不触发 - ⚠️ 避免边界重叠：不要同时写
min-width: 768px和max-width: 768px，768px 宽度行为不可控
media属性必须是合法 CSS 媒体查询
写错语法，浏览器会静默忽略整条 <source>，既不报错也不加载——你根本察觉不到它失效了。
常见非法写法包括缺括号、单位缺失、用词错误。注意 media 只接受完整媒体查询表达式，不是简单数值或设备名。
- ✅
media="(max-width: 768px)"—— 括号+单位齐全 - ❌
media="max-width: 768px"—— 缺外层括号 → 被忽略 - ❌
media="768px"或media="tablet"—— 非法媒体查询 → 失效 - ❌
media="(min-width: 768)"—— 缺px单位 → 无效
type和srcset混用时格式优先级靠前，但需服务器支持
<source type="image/avif"> 的作用不是“尝试加载”，而是“如果支持就用它，否则跳过”。浏览器不会因为 AVIF 加载失败就回退到下一个 <source>，它只看 MIME 类型是否原生支持。
这意味着：即使你写了 AVIF + WebP + JPG 三层 fallback，只要服务器没配好 image/avif 的 MIME 类型，Chrome 就不会发请求；而 Safari 目前仍不支持 AVIF，它会直接跳过整行，落到下一条 WebP —— 前提是你把 WebP 写在 AVIF 后面。
- ✅ WebP 放 AVIF 后、JPG 前：
<source type="image/avif">→<source type="image/webp">→<img> - ⚠️ 服务器必须返回正确的
Content-Type，否则type形同虚设 - ⚠️
srcset中不能混用w和x描述符：写"a.jpg 400w, b.jpg 2x"会让整个值被浏览器忽略
<img> 上的 sizes：它只在这里生效，<source> 里写的 sizes 会被完全无视。如果你希望 fallback 图也适配高 DPR，就必须在 <img> 标签上显式加 sizes 和 srcset。 
