picture 标签本身不适配屏幕，真正起效的是 source 的 media/type 及 img 的 srcset/sizes；media 必须写在 source 里且按宽屏到窄屏顺序排列，srcset 的 x 描述符仅在 img 上生效，sizes 只能写在 img 上并与 css 布局一致。
picture 标签本身不“适配”屏幕，它只是把选择权交给浏览器；真正起效的是 <source></source> 的 media 和 type，以及最外层 <img> 的 srcset 和 sizes。写错顺序、混用 x 和 w、漏掉 <img>，都会导致只加载 fallback 图。
media 属性必须写在 <source></source> 里，且顺序决定匹配结果
浏览器从上到下扫描 <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 的 1x/2x 只在 <img> 上生效，<source></source> 里的 2x 被无视
<source></source> 的 srcset 里写 icon@2x.png 2x，浏览器压根不看——它只按 media 匹配后取第一个资源。DPR（设备像素比）适配必须交给最外层 <img> 的 srcset，且不能带 sizes。
- ✅ 正确结构：
<source media="(max-width: 480px)" srcset="small-1x.jpg, small-2x.jpg"></source>+<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"></source>→ 小屏设备只加载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"></source>→sizes写在<source></source>里会被完全忽略 - ⚠️ 值与 CSS 不一致：CSS 设了
width: 300px，但sizes写成100vw，浏览器预估尺寸偏差，可能加载过大的图
验证是否真加载了高 DPI 图，别信 devicePixelRatio
window.devicePixelRatio 返回 2 只说明设备支持高 DPI，不代表图片就加载了 @2x 版本。真正决定加载哪张图的是 HTML 结构和浏览器解析逻辑。
- 唯一可靠验证方式：打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选 Img 类型 → 找到对应图片 → 右键「Copy image src」→ 粘贴确认 URL 含
@2x或@3x - 模拟不同 DPR：DevTools → ⚙️ → Sensors → Device pixel ratio → 改为 1 / 2 / 3，然后 **硬刷新（Ctrl+Shift+R）**，普通刷新可能走缓存
- 注意检查
<img>是否被 CSS 强制设了固定宽高（如width: 300px; height: 200px），这会导致 @2x 图被压缩拉伸，即使加载了也模糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
