picture标签本身不提供适配，仅将选择权交给浏览器；真正起效的是<source>的media、srcset、type及<img>的srcset和sizes，顺序错误、混用描述符或漏写<img>均导致仅加载fallback图。
直接结论：picture 标签本身不“提供适配”，它只是把选择权交给浏览器；真正起作用的是 <source> 的 media、srcset 和 type，以及最外层 <img> 的 srcset 和 sizes。写错顺序、混用描述符、漏掉 <img>，都会导致只加载一张图。
media 属性必须写在 <source> 里，且顺序决定匹配结果
浏览器从上到下扫描 <source>，遇到第一个满足 media 条件的就停，后面的全忽略。这不是“多选”，是“短路匹配”。
- ✅ 正确顺序：宽屏断点放前面，窄屏兜底放最后 —— 比如
media="(min-width: 1200px)"→media="(min-width: 768px)"→media="(max-width: 767px)" - ❌ 错误写法：把
max-width: 767px放最前，小屏设备永远卡在这条，宽屏规则根本没机会生效 - ⚠️ 断点别重叠：比如
max-width: 768px和min-width: 768px在恰好 768px 宽时都为真，但浏览器只认第一个，行为不可控 - 单位不能省：
768是无效媒体查询，必须写成768px
srcset + x 描述符只在 <img> 上生效，<source> 里的 2x 被无视
<source> 的 srcset 里写 photo@2x.jpg 2x，浏览器压根不看 —— 它只按 media 匹配后取第一个资源。DPR（设备像素比）适配必须交给最外层 <img> 的 srcset，且不能带 sizes。
- ✅ 正确结构：
<source media="(max-width: 480px)" srcset="small-1x.jpg, small-2x.jpg">+<img src="small-1x.jpg" srcset="small-1x.jpg 1x, small-2x.jpg 2x"> - ❌ 常见错误：
<source srcset="a@2x.jpg 2x"><img src="a@1x.jpg">→ 小屏设备只加载a@2x.jpg，但 DPR=1 时本该用 1x - ⚠️ 混用
w和x：同一srcset中同时出现400w和2x，整个值被解析为无效，回退到src
sizes 只能写在 <img> 上，且必须和 CSS 布局一致
sizes 不控制加载哪张图，而是告诉浏览器“这张图在页面中大概占多宽”。这个值被用来配合 srcset 中的 w 描述符做宽度匹配 —— 如果你用了 w，就必须配 sizes；如果只用 x，sizes 反而会禁用 DPR 匹配。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理写法：
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"，对应移动端全宽、平板半宽、桌面固定比例 - ❌ 错误示例：
<source sizes="100vw">→sizes写在<source>里会被完全忽略 - ⚠️ 值与 CSS 不一致：CSS 设了
width: 300px，但sizes写成100vw，浏览器预估尺寸偏差，可能加载过大的图浪费带宽
type 属性用于格式降级，现代格式优先但必须有兜底
type="image/webp" 或 type="image/avif" 让浏览器跳过不支持的格式，无需 JS 判断。但前提是 <source> 按支持优先级从高到低排列，且末尾 <img> 必须存在并提供 src。
- ✅ 推荐顺序：
<source type="image/avif" srcset="photo.avif">→<source type="image/webp" srcset="photo.webp">→<img src="photo.jpg" alt="..."> - ❌ 漏掉
<img>：整个<picture>渲染为空白，不是加载失败，是 DOM 结构不完整 - ⚠️
type值写错：比如type="webp"缺少image/前缀，浏览器当无效 MIME 类型处理，直接跳过该<source>
最容易被忽略的其实是验证方式：别靠 window.devicePixelRatio 打印值猜，打开 Chrome DevTools → Network 面板 → 硬刷新（Ctrl+Shift+R）→ 看实际请求的图片 URL 是不是 @2x.jpg；再切 Device Toolbar 改 DPR，对比加载差异。缓存、模拟器设置、CSS 强制宽高拉伸，都会让“看起来模糊”和“没加载对图”混淆。
