picture标签本身无media属性，真正起作用的是其内部source元素的media属性，需按picture→source→img顺序书写，浏览器自上而下匹配media，匹配即加载对应srcset图片，否则回退至img的src。
直接结论：用 <source></source> 的 media 属性配合 srcset，按视口宽度（不是设备分辨率）做条件匹配，顺序从宽到窄写，最后必须带 <img> 作为兜底。
为什么 media 必须写在 <source></source> 里，而不是 <picture></picture>
<picture></picture> 标签本身没有 media 属性——这是常见误解。真正起作用的是其子元素 <source></source> 的 media。浏览器按顺序检查每个 <source></source>，一旦某个 media 表达式为真，就加载它 srcset 里的图片，其余全部跳过。
常见错误现象：
- 写了
<picture media="..."></picture>→ 语法无效，被忽略 -
<source></source>没写media，只写srcset→ 它会无条件生效，挡住后面的<source></source> - 多个
<source></source>的media条件重叠（比如都写了max-width: 768px）→ 只有第一个被加载
怎么写 media 才能正确覆盖主流断点
值必须是合法的 CSS 媒体查询表达式，不能简写成数字或单词。推荐用移动端优先、从大到小排列的写法（避免小屏被宽屏规则“误捕获”）：
-
media="(min-width: 1200px)"→ 桌面大屏（优先级最高，放最前） -
media="(min-width: 768px) and (max-width: 1199px)"→ 平板横屏 -
media="(max-width: 767px)"→ 手机（含竖屏平板，建议作为兜底）
注意：media="(orientation: landscape)" 在桌面浏览器中不可靠，iOS Safari 对 orientation 支持不一致，慎用。
srcset 里该用 x 还是 w？能不能混用？
取决于你要解决的问题：
- 适配设备像素比（如 Retina 屏）→ 用
x：srcset="photo-400w.jpg 1x, photo-800w.jpg 2x" - 适配不同视口宽度下图片的显示尺寸 → 用
w+ 配合sizes（sizes必须写在<img>上） -
不能混用：同一
srcset中同时出现1x和400w会导致浏览器解析失败，回退到<img>的src
示例（纯 DPR 切换）：
<source media="(min-width: 1200px)" srcset="hero-1200w.jpg 1x, hero-2400w.jpg 2x"></source>
最容易被忽略的三个硬性要求
缺一不可，否则图片不显示或降级失效：
-
<picture></picture>内部最后一个元素**必须是<img>**，且必须有src属性（哪怕只是占位图） -
<img>**不能省略alt**，否则可访问性失败；它的src是所有<source></source>都不匹配时的唯一 fallback - 所有
srcset中的路径要真实存在，404 时浏览器不会报错，但会静默 fallback 到<img>的src—— 调试时务必清缓存并用 DevTools Network 面板确认实际加载的是哪个资源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
