picture标签本身不切换图片，而是浏览器在HTML解析阶段根据source的media条件（须语法正确、从宽到窄排列）自动选择最匹配的srcset资源加载；media错误、顺序颠倒或source置于img后均导致静默回退至img src。
picture 标签本身不“改图”，它只决定加载哪张图
浏览器在解析 HTML 阶段就完成资源选择，<picture> 不会运行时切换、不触发重绘、也不依赖 JS。所谓“改图”，其实是让浏览器从多个 <source> 中挑出最匹配当前设备条件的那一个 srcset，然后加载并渲染——没匹配上的 <source> 根本不会发请求。
media 属性写错或顺序反了，就永远只走 <img>
这是最常被当成“没生效”的真实原因：浏览器静默忽略非法 media 值，或因顺序错误跳过宽屏规则。
-
media="max-width: 768px"缺括号 → 整个<source>被跳过 -
media="(max-width: 767px)"放在最上面 → 所有设备（包括桌面）都卡在这条，后面min-width规则永不执行 -
<source>写在<img>后面 → 浏览器直接忽略全部<source>，只加载<img src> - 所有
media都不满足（比如视口刚好卡在断点缝隙）→ 回退到<img>，你却以为“切图失败”
横竖屏、深色模式、设备像素比，都得靠对应 media 特性
别指望一个 media="(min-width: 768px)" 同时搞定方向和主题。不同场景必须用不同的媒体特性，且要写对语法：
- 横竖屏：
media="(orientation: landscape)"或media="(orientation: portrait)"，注意大小写和冒号 - 深色模式：
media="(prefers-color-scheme: dark)"，系统未设偏好时会 fallback 到<img> - 高 DPR：
srcset="logo@2x.png 2x"，但必须配合<img>的sizes或容器实际宽度，否则 2x 图可能白加载 - 叠加条件更安全：
media="(orientation: portrait) and (max-height: 700px)"过滤横屏小屏设备
<img> 不是可选配件，它是强制 fallback 和渲染主体
没有 <img>，<picture> 就是空容器——即使所有 <source> 都匹配成功，页面也啥都不显示。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须带src和alt，不能写成<img />或<img> -
<img>的src可以复用某个<source>的图（比如 light 模式图），但绝不能留空或填# - 旧版 Safari（16.4 之前）完全靠
<img>渲染，缺了就白屏 - 推荐给
<img>也加srcset和sizes，让它自己也能适配 DPR
<img> 的 src 属性。 
