media="(orientation: landscape)"是唯一合法写法，漏括号、拼错或大小写错误会导致<source>被静默忽略；source顺序决定优先级，landscape必须在portrait前；picture不响应旋转事件，需用resize监听手动切换；sizes仅对img有效，需配合srcset的w描述符适配不同宽度。
media="(orientation: landscape)" 必须写对括号和冒号
浏览器只认标准媒体查询语法，media="(orientation: landscape)" 是唯一合法写法。漏掉括号、写成 media="orientation: landscape" 或 media="landscape"，整个 <source> 就会被静默忽略——你根本看不到报错，但横屏时照样加载竖图。
常见错误还有把 orientation 拼错成 orientaion，或大小写混用（如 Orientation），这些都会让匹配失败。iOS 和 Android 浏览器对此极其严格，Safari 尤其不宽容。
source 顺序决定横竖屏谁优先
浏览器从上到下逐个检查 <source>，遇到第一个为 true 的就立刻加载并停止，后面全跳过。所以顺序不是“可选”，而是逻辑关键：
- 横屏设备宽 > 高，
(orientation: landscape)为 true → 应该放最前面 - 竖屏设备高 > 宽，
(orientation: portrait)为 true → 放第二位 -
<img>是强制 fallback，必须存在且带src，放在最后
如果把 portrait 写在前面，所有设备（包括横屏）都会卡在这条，因为竖屏判断条件在多数小屏设备上也成立（比如折叠屏半开状态），横屏资源永远没机会被选中。
立即学习“前端免费学习笔记（深入）”；
别指望 picture 自动响应旋转事件
<picture> 只在初始加载时做一次匹配，页面旋转后不会重新触发资源选择。也就是说：用户从竖屏转横屏，已加载的图片不会切换，也不会重新拉取横图。
如果你需要旋转后实时更新封面，得放弃 poster 或 <picture>，改用 <img> 覆盖层 + window.addEventListener('resize', ...) 手动切换 src。判断方向别用已废弃的 window.orientation，改用 window.innerWidth > window.innerHeight 更可靠。
sizes 和 srcset 要配对用，否则横竖图都可能拉错尺寸
仅靠 orientation 只能切“横/竖”大类，但每种方向下仍需适配不同 DPR 和视口宽度。这时候 sizes 和 srcset 就不能省：
-
sizes只能写在<img>上，不能写在<source>里（写了也无效） -
<source>的srcset里用w描述符（如wide-800w.jpg 800w），对应<img>的sizes - 如果只关心 DPR（比如 Retina 屏加载 2x 图），就用
x描述符，但必须写在<img>的srcset里，<source>里的2x会被忽略
最容易被忽略的是：横屏图在桌面端可能宽达 1920px，但竖屏图在手机上通常只占 375px 宽，sizes 值若没区分断点，小屏设备可能加载一张 1920w 的横图，白白浪费带宽。
