的media属性必须是合法css媒体查询（如(max-width: 768px)），仅在内按顺序匹配首个为true的条件并加载其srcset，其余跳过；必须作为最后子元素提供src和alt兜底。
picture 标签本身不依赖 CSS 媒体查询生效，它用的是自己的 media 属性做资源选择；CSS 媒体查询控制样式，<picture></picture> 控制加载——两者目的不同、作用域不同，强行“结合”反而容易出错。
为什么不能把 picture 的 media 当成 CSS 媒体查询来写
<source></source> 的 media 属性必须是合法的 CSS 媒体查询字符串，但它只在 <picture></picture> 内部起作用：浏览器按顺序解析 <source></source>，匹配第一个为 true 的 media 条件后就加载对应 srcset，其余跳过。它不会触发页面重绘，也不影响其他元素样式。
常见错误包括：
- 漏写括号，比如写成
min-width: 768px而不是(min-width: 768px)，导致整个<source></source>被忽略 - 把
@media规则直接抄进media属性里，比如@media (max-width: 768px)——<source></source>不认@ - 在
<source></source>里混用src和srcset，导致 fallback 失效或资源加载异常
横竖屏切换必须用 (orientation: landscape) 和 (orientation: portrait)
这是唯一能稳定响应设备物理方向变化的方式。CSS 媒体查询里的 orientation 是运行时计算的（基于屏幕宽高比），而 <picture></picture> 的 media 会实时响应这个值——只要用户旋转设备，浏览器就会重新评估并可能切换加载的资源。
注意点：
- 必须写全括号，
media="(orientation: landscape)"才有效，media="orientation: landscape"会被当成无效查询 - 横竖屏判断依据是当前视口宽高比，不是设备类型；iPad 横着拿就是
landscape，手机横着拿也一样 - 不要和
min-width混用在同一<source></source>里，比如(orientation: portrait) and (max-width: 480px)在部分旧 Android 浏览器上兼容性差 -
<img>是必需兜底，且必须有src和alt，否则无图可显
sizes 和 srcset 必须配对，否则高 DPI 屏会模糊
只写 srcset="tall-600.jpg 1x, tall-1200.jpg 2x" 是不够的。浏览器不知道这张图在页面中占多大宽度，没法判断该选 1x 还是 2x——它默认按 1x DPR 计算，结果 Retina 屏加载了 600px 宽的图，显示出来就发虚。
正确做法是每个 <source></source> 都配 sizes：
<source media="(orientation: portrait)" srcset="tall-600.jpg 600w, tall-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, 600px"></source>
解释：
-
sizes="(max-width: 480px) 100vw, 600px"告诉浏览器：小屏下图占满视口，大屏下固定占 600px 宽 - 设备 DPR=2 时，浏览器会算出需要约 1200px 物理宽度的图，于是从
srcset里挑tall-1200.jpg - 漏掉
sizes，或写成sizes="100vw"，会导致高 DPI 屏始终加载低分辨率图
多个 <source></source> 的顺序决定匹配优先级
浏览器从上到下逐个检查 <source></source> 的 media，遇到第一个满足条件的就停，后面全跳过。所以顺序不能乱。
典型错误写法：
<source media="(max-width: 1200px)" srcset="medium.jpg"><source media="(max-width: 768px)" srcset="small.jpg"></source></source>
这样在 769–1200px 区间会加载 medium.jpg，但在 320–768px 区间反而还是加载 medium.jpg（因为第一个条件已满足），small.jpg 永远不会被选中。
正确顺序是「从具体到宽泛」：
- 先写
(max-width: 768px) - 再写
(max-width: 1200px) - 最后用
<img>作为无条件兜底
横竖屏场景同理：(orientation: landscape) 和 (orientation: portrait) 是互斥条件，谁在前谁优先，但通常无需纠结顺序——因为设备同一时刻只能处于一种方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
