picture标签本身无media属性，真正起作用的是source元素的media属性；必须按picture→source→img顺序书写，media值需为合法css媒体查询（如(max-width: 768px)），否则被静默忽略，浏览器直接回退至img的src加载兜底图。
picture 标签本身没有 media 属性，真正起作用的是 <source></source> 的 media 属性——写在 <picture></picture> 上的 media 会被完全忽略。
为什么写了 media 却不切换图片？
浏览器根本没匹配到任何 <source></source>，直接 fallback 到 <img src> 加载了兜底图。你看到“没切换”，其实是它一直在默默加载最后一张图。
-
media值必须是合法 CSS 媒体查询，比如(max-width: 768px)，不能只写768px或漏掉括号 -
<source></source>如果没带media也没带type，浏览器会跳过它（不是警告，是静默忽略） - 多个
<source></source>的media条件重叠（如都写(max-width: 768px)），只有第一个生效，后面的永远不触发 - Chrome 开发者工具的 Network 面板里，看请求的 URL 是哪条
srcset或src，别光看元素面板里的src属性值
<source media></source> 必须按什么顺序写？
从大屏到小屏、高优先级到低优先级排列，避免小屏被宽屏规则“误捕获”。移动端优先的写法反而容易出错。
- 推荐顺序：
media="(min-width: 1200px)"→media="(min-width: 768px) and (max-width: 1199px)"→media="(max-width: 767px)" - 不要用
media="(orientation: landscape)"做主逻辑：桌面浏览器不触发，iOS Safari 对 orientation 支持不稳定 - 如果只适配宽度，
<source></source>的srcset用w描述符（如hero-400w.jpg 400w），但必须配sizes，否则浏览器按100vw算，小屏也拉大图 -
<img>的srcset里混用x和w描述符会失效——x只能用于像素密度，w+sizes才管视口尺寸
想同时适配屏幕宽度和设备像素比（DPR），怎么写？
不能把 media 和 2x 混在同一个 <source></source> 的 srcset 里——浏览器会跳过整条 <source></source>。
- 正确组合方式一（按宽度分源，按 DPR 在每个源内细分）：
<source media="(max-width: 480px)" srcset="small-1x.jpg 1x, small-2x.jpg 2x"></source><source media="(min-width: 481px)" srcset="large-1x.jpg 1x, large-2x.jpg 2x"></source><img src="large-1x.jpg" srcset="large-1x.jpg 1x, large-2x.jpg 2x" alt=""> - 正确组合方式二（格式优先 + DPR 兜底）：
<source type="image/webp" srcset="hero-webp-800w.jpg 800w, hero-webp-1600w.jpg 1600w" sizes="..."></source><source media="(min-resolution: 2dppx)" srcset="hero-2x.jpg 2x"></source><img src="hero-1x.jpg" srcset="hero-1x.jpg 1x, hero-2x.jpg 2x" alt=""> -
<img>的src必须存在，且最好指向 1x 版本——这是 IE、老 Android WebView 等不支持<picture></picture>的最终保障
最容易被忽略的一点：<source></source> 必须严格写在 <img> 之前，顺序颠倒整个 <picture></picture> 就被当作文本容器处理，图片直接不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
