picture标签必须以开始并以结束，内部包含零个或多个元素和一个必需的元素作为回退。
picture标签必须以![]()
浏览器解析<img>都必须作为最后一个子元素存在——它不是可选项，而是强制 fallback 节点。漏掉、写成<img>、或只写<img alt="...">而没带src，整个区域都会空白，尤其在 Safari 和旧版 iOS 中毫无提示。
source必须写在img前面，media值要合法带括号
浏览器只认<source></source>的media属性，且必须是完整 CSS 媒体查询：写成media="max-width: 768px"（缺括号）或media="768px"（无单位无逻辑符）会被静默忽略，该<source></source>直接失效。常见错误还有把<source></source>放在<img>后面——浏览器跳过所有<source></source>，只加载<img src>。
多个source的media顺序必须从宽到窄
浏览器不“计算最优”，只“取第一个为 true 的”。如果把media="(max-width: 767px)"放最前，所有 ≤767px 的设备都会卡在这条，后面的min-width: 1200px永远不执行。正确顺序是：
<source media="(min-width: 1200px)" srcset="desktop.jpg"></source><source media="(min-width: 768px)" srcset="tablet.jpg"></source><source media="(max-width: 767px)" srcset="mobile.jpg"></source>
断点之间不能重叠，比如max-width: 768px和min-width: 768px在恰好 768px 宽时行为不可控。
type属性依赖服务器返回正确的Content-Type
用type="image/webp"做格式降级时，如果服务器返回的响应头是Content-Type: text/plain或image/jpeg，Chrome 会标记为blocked:mime-type，该<source></source>被跳过，浏览器继续往下找。调试得看 Network 面板里实际响应头，而不是只检查文件后缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
