picture标签通过source的media="(orientation: landscape/portrait)"可纯css按设备方向切换不同构图图片，无需js；orientation必须完整书写在source上，值需带括号和引号；横竖图应差异构图而非仅缩放，推荐宽高比≥16:9和≤4:5；srcset统一用x描述符；img的src必须存在且为1x fallback；不支持时回退至img，但需确保其通用性。
picture 标签用 media="(orientation: landscape)" 和 media="(orientation: portrait)" 就能直接按设备方向切换图片，不需要 JS，也不依赖屏幕宽高数值——它读的是系统级方向信号，比 max-width 更可靠。
orientation 媒体查询必须写在 source 的 media 属性里
浏览器只认 <source></source> 标签上的 media，<img> 上写没用。而且值必须是完整括号表达式，不能漏掉引号或括号：
- ✅ 正确：
media="(orientation: landscape)" - ❌ 错误：
media="orientation: landscape"（缺括号） - ❌ 错误：
media="(min-width: 768px) and (orientation: portrait)"（虽然语法合法，但 orientation 本身已足够，加 width 容易导致横竖屏临界点错配）
方向变化时，浏览器会立刻重新评估并加载新匹配的 source，旧图不会被缓存复用（除非 HTTP 缓存策略允许）。
横竖图要真正“不同构图”，不是单纯缩放
用 orientation 的核心价值是 art direction：横屏加载宽幅全景图，竖屏加载裁剪后的人像/特写图。如果两张图只是同一张图拉伸缩放，不如直接用 CSS 控制 object-fit。
- 横屏图建议宽高比 ≥ 16:9，文件名可带
-wide后缀 - 竖屏图建议宽高比 ≤ 4:5，文件名可带
-tall后缀 - 避免让竖屏图也塞进横屏容器里——CSS 需配合限制最大宽度，否则窄图会被撑变形
srcset 和 sizes 要各自配对，别混用 x 和 w
横竖图都需适配高 DPR 设备，但 srcset 写法要统一。推荐全用 x 描述符（如 1x/2x），因为方向切换不改变图片在页面中的渲染宽度，只换内容：
<picture><source media="(orientation: landscape)" srcset="hero-wide-1x.jpg 1x, hero-wide-2x.jpg 2x"><source media="(orientation: portrait)" srcset="hero-tall-1x.jpg 1x, hero-tall-2x.jpg 2x"> @@##@@ </source></source></picture>
-
<img src="hero-fallback.jpg" alt="活动主视觉">的src必须存在，且应是 1x 版本，否则不支持picture的老浏览器会空白 - 不要在同一个
srcset里混用2x和800w，浏览器行为未定义 -
sizes在纯orientation场景下可省略——因为图片渲染宽度通常由 CSS 控制，而非响应式布局断点
回退逻辑和兼容性要注意这三点
当 orientation 不匹配、资源加载失败或浏览器不支持 picture 时，最终走 <img>。但这个兜底不是万能的：
-
<img>必须有src，不能只靠srcset；否则 Safari 12 及更早版本会不显示 - 某些安卓 WebView（尤其旧版）会忽略
orientation查询，始终走<img>，所以 fallback 图得是通用构图 - 横竖屏切换瞬间可能出现短暂空白，这是正常行为；若想平滑过渡，得靠 CSS
opacity+transition控制，picture本身不提供动画能力
真正容易被忽略的是：orientation 是实时系统属性，但部分折叠屏或旋转传感器异常的设备可能上报错误值——所以 fallback 图不能太“偏科”，得兼顾两种方向的基本可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
