picture标签本身不显示图片，仅将选择权交给浏览器；真正起效的是source的顺序、media语法（必须带括号）、srcset描述符及必需的img元素。
picture 标签本身不显示图片，也不自动“切换”——它只是把选择权交给浏览器；真正起效的是你写的 <source></source> 顺序、media 语法、srcset 描述符，以及那个必须存在的 <img> 元素。
为什么写了 <source></source> 却只加载 <img src>
这不是浏览器偷懒，而是条件根本没被识别或匹配上：
-
media="(max-width: 768px)"写成media="max-width: 768px"（缺括号）→ 浏览器静默忽略整条<source></source> -
media="768px"或media="tablet"→ 非法媒体查询，该<source></source>失效 -
<source></source>写在<img>后面 → 浏览器跳过，直接用<img> - 所有
media都不满足（比如断点写成(min-width: 769px)但视口刚好是768px）→ 回退到<img src>，无提示
media 的顺序和断点怎么写才不翻车
浏览器从上到下扫描，遇到第一个为 true 的就停，不会继续判断。顺序错，宽屏设备可能永远拿不到高清图：
- ✅ 推荐写法：从宽到窄，用开区间避免重叠
media="(min-width: 1200px)"→media="(min-width: 768px) and (max-width: 1199px)"→media="(max-width: 767px)" - ❌ 危险写法：
media="(max-width: 768px)"放最前，768px宽度时直接命中，后面规则全失效 - ⚠️ 单位不能省：
768是无效值，必须写768px
srcset 和 sizes 到底该放哪儿
sizes 只能写在 <img> 上，<source></source> 里写等于白写；srcset 中的 x 描述符（如 2x）在 <source></source> 里会被忽略，只在 <img> 上生效：
- ✅ 正确结构：
<source media="(max-width: 480px)" srcset="small.jpg"></source>+<img src="small.jpg" srcset="small.jpg 1x, small@2x.jpg 2x" sizes="100vw"> - ❌ 常见错误：
<source srcset="a@2x.jpg 2x"></source>→ 小屏设备只加载a@2x.jpg，但 DPR=1 时本该用 1x 版本 - ⚠️ 混用
w和x：photo-400w.jpg 400w, photo@2x.jpg 2x整个srcset值被当成无效，回退到src
<img> 不是可选项，它是强制 fallback
<picture></picture> 是容器，不渲染任何内容；没有 <img>，就算所有 <source></source> 都匹配成功，页面也是空白：
-
<img>必须存在，且必须带src和alt属性 - 不能写成自闭合：
<img>或<img>都无效，必须是<img src="..." alt="..."> - 旧版 Safari（16.4 之前）完全依赖
<img src>渲染，漏掉就白屏 -
<img>的src应该是兜底可用图，不是占位符或空字符串
最容易被忽略的其实是边界行为：768px 视口到底走哪条规则、DPR=1.5 的设备如何选图、服务器返回的 Content-Type 是否匹配 type="image/webp" —— 这些地方一错，<source></source> 就彻底失效，你却看不到任何报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
