<picture> 的 media 属性不生效，主因是浏览器未匹配任何 <source> 的 media 条件而回退至 <img>；常见错误包括媒体查询单位缺失（如 min-width: 768）、误用 orientation、<source> 顺序错误或断点不互斥；且浏览器初始渲染后不自动重评估 media，需监听 resize 等事件手动触发更新。
为什么 <picture> 的 media 属性不生效？
常见原因是浏览器没匹配到任何 <source> 的 media 条件，最终 fallback 到 <img>，但你根本没意识到它被“悄悄兜底”了。横竖屏切换依赖 width 和 height 的实际视口尺寸，而很多开发者误用 max-width 或写错单位（比如漏掉 px），导致媒体查询始终为 false。
- 必须用
min-width/max-width（推荐min-width），且单位不可省略：min-width: 768px✅，min-width: 768❌ - 横屏判断不能只看
orientation: landscape—— 它在桌面浏览器中不可靠，尤其 Chrome 和 Safari 对该媒体特性支持弱或有延迟 -
<source>标签必须放在<picture>内、<img>之前，顺序错了就失效
怎么写横竖屏专用的 <source>？
最稳妥的方式是用视口宽度断点，而不是依赖 orientation。比如：竖屏手机常用 max-width: 767px，横屏平板或大屏手机用 min-width: 768px。注意断点要互斥、无间隙，否则可能多个 <source> 同时满足，浏览器取第一个匹配项。
<picture> <source media="(max-width: 767px)" srcset="photo-portrait.jpg"> <source media="(min-width: 768px)" srcset="photo-landscape.jpg"> <img src="photo-fallback.jpg" alt="描述"> </picture>
- 断点数值建议和你 CSS 媒体查询保持一致，避免维护两套逻辑
- 如果想适配 iPad 横屏（1024px 宽），可加一条：
<source media="(min-width: 1024px) and (orientation: landscape)">，但仅作补充，不作为主判断 -
srcset可配合sizes使用，但横竖屏切换场景下，单图就够了，别过度复杂化
为什么图片没随旋转实时切换？
多数移动端浏览器在屏幕旋转时不会重新评估 <picture> 的 media，除非触发重排（比如 resize 事件）。这不是 bug，而是规范行为 —— <picture> 只在初始渲染时解析一次 <source>。
- 解决方案：监听
window.orientation（已废弃）或更可靠的window.matchMedia+resize事件 - 简单补救：
const mql = matchMedia("(min-width: 768px)"); mql.addEventListener("change", () => { // 强制重载 img.src 或替换 picture 内容 const img = document.querySelector("picture img"); img.src = img.src; // 触发重新加载 }); - 注意：频繁操作
src可能引发重复请求，建议加防抖或只在明确旋转后执行
兼容性要注意哪些坑？
<picture> 在 IE 完全不支持，Android 4.4 及更早 WebView 也不行。即使现代浏览器支持，media 查询对 orientation 的响应也参差不齐 —— Firefox 在桌面端返回 portrait 即使窗口拉宽，Safari 在 iOS 上对 resize 事件延迟明显。
立即学习“前端免费学习笔记（深入）”；
- 底线方案：用 JavaScript 动态设置
<img>的src，绕过<picture>限制 - 检测支持：
"picture" in document.createElement("picture")，不支持时降级为单一<img> - 不要把横竖屏切换当作核心功能来依赖 —— 用户可能禁用 JS、用阅读模式、或截图分享，此时只有
<img>fallback 起作用
横竖屏图片切换真正难的不是语法，而是如何让浏览器“愿意重算”。多数人卡在媒体查询写对了但没生效，其实问题出在初始渲染后没人告诉它该更新 —— 这个点很容易被忽略。
