picture标签本身不切换图片，而是浏览器在html解析阶段根据source的media条件（须语法正确、从宽到窄排列）自动选择最匹配的srcset资源加载；media错误、顺序颠倒或source置于img后均导致静默回退至img src。

picture 标签本身不“改图”，它只决定加载哪张图

浏览器在解析 HTML 阶段就完成资源选择，<picture></picture> 不会运行时切换、不触发重绘、也不依赖 JS。所谓“改图”，其实是让浏览器从多个 <source></source> 中挑出最匹配当前设备条件的那一个 srcset，然后加载并渲染——没匹配上的 <source></source> 根本不会发请求。

media 属性写错或顺序反了，就永远只走 <img>

这是最常被当成“没生效”的真实原因：浏览器静默忽略非法 media 值，或因顺序错误跳过宽屏规则。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• media="max-width: 768px" 缺括号 → 整个 <source></source> 被跳过
• media="(max-width: 767px)" 放在最上面 → 所有设备（包括桌面）都卡在这条，后面 min-width 规则永不执行
• <source></source> 写在 <img> 后面 → 浏览器直接忽略全部 <source></source>，只加载 <img src>
• 所有 media 都不满足（比如视口刚好卡在断点缝隙）→ 回退到 <img>，你却以为“切图失败”

横竖屏、深色模式、设备像素比，都得靠对应 media 特性

别指望一个 media="(min-width: 768px)" 同时搞定方向和主题。不同场景必须用不同的媒体特性，且要写对语法：

• 横竖屏：media="(orientation: landscape)" 或 media="(orientation: portrait)"，注意大小写和冒号
• 深色模式：media="(prefers-color-scheme: dark)"，系统未设偏好时会 fallback 到 <img>
• 高 DPR：srcset="logo@2x.png 2x"，但必须配合 <img> 的 sizes 或容器实际宽度，否则 2x 图可能白加载
• 叠加条件更安全：media="(orientation: portrait) and (max-height: 700px)" 过滤横屏小屏设备

<img> 不是可选配件，它是强制 fallback 和渲染主体

没有 <img>，<picture></picture> 就是空容器——即使所有 <source></source> 都匹配成功，页面也啥都不显示。

• <img> 必须带 src 和 alt，不能写成 <img> 或 <img>
• <img> 的 src 可以复用某个 <source></source> 的图（比如 light 模式图），但绝不能留空或填 #
• 旧版 Safari（16.4 之前）完全靠 <img> 渲染，缺了就白屏
• 推荐给 <img> 也加 srcset 和 sizes，让它自己也能适配 DPR

真正容易被忽略的不是怎么写，而是你怎么验证：打开 DevTools → Network 面板，刷新页面，看实际发出的图片请求是哪一张；再切横屏/深色模式，确认请求变了——而不是只盯着元素面板里 <img> 的 src 属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！