HTML多版式适配：结合Picture标签与Media查询实现响应式图稿的方法-html教程-PHP中文网

picture标签本身不实现多版式适配，仅按media顺序、srcset写法和服务器mime类型将预裁剪/预格式化图片交给浏览器；常见失效原因包括media写在picture上、缺括号、source置于img后、断点重叠及顺序错误（须从宽到窄），且img必须存在并含src与alt。

html多版式适配：结合picture标签与media查询实现响应式图稿的方法

picture 标签本身不实现“多版式适配”，它只是把预裁剪、预压缩、预格式化的多张图按条件交给浏览器——真正决定是否加载桌面竖版、移动端横版、WebP 降级图的，是你写的 media 顺序、srcset 写法和服务器返回的 Content-Type。

不是浏览器不执行，而是匹配逻辑被跳过了：

media 写在 <picture></picture> 上（如 <picture media="(max-width:768px)"></picture>）→ 浏览器完全忽略整个 <source></source> 块
media="(max-width: 768px)" 缺少括号，写成 media="max-width: 768px" → 静默失效，该 <source></source> 不参与任何匹配
<source></source> 放在 <img> 后面 → 浏览器直接跳过所有 <source></source>，只加载 <img src>
断点重叠，比如同时存在 media="(min-width: 768px)" 和 media="(max-width: 768px)" → 768px 宽度命中第一个，第二个永不触发

浏览器是线性扫描，找到第一个为 true 的就停，不会“综合最优”：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

✅ 正确（桌面 → 平板 → 手机）：<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"></source> → <source media="(min-width: 768px)" srcset="hero-tablet.jpg"></source> → <source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source>
❌ 错误（手机规则放最前）：<source media="(max-width: 767px)" srcset="hero-mobile.jpg"></source> → 后面两条永远不执行
边界建议留 1px 空隙：用 (max-width: 767px) 和 (min-width: 768px)，避免刚好卡在 768px 时行为不可控

漏掉它，或只写 <img alt="..."> 而不带 src，结果不是报错，是页面留白：

<img> 必须存在，且必须含 src 和 alt 属性；不能写成 <img> 或 <img>
旧版 Safari（16.4 之前）完全依赖 <img src> 渲染，缺了就白屏
<img> 上推荐加 sizes 和 srcset，尤其当它作为 fallback 也要适配高 DPR 时（例如 srcset="fallback-1x.jpg, fallback-2x.jpg 2x"）
如果 <source></source> 全部不匹配（语法错/条件未命中/服务器 MIME 错），浏览器静默回退到 <img src>，你根本看不到提示

想用 WebP 优先 + JPEG 降级，却加载失败，问题往往不在 HTML 结构：

type="image/webp" 但服务器返回 Content-Type: text/plain → Chrome 标记为 blocked:mime-type，不加载
多个 <source></source> 按格式支持度降序排列，但没提供通用 fallback <source type="image/jpeg"></source> → Safari 13 前等不支持 WebP 的浏览器直接跳过所有 <source></source>，只能靠 <img src>
srcset 混用 w 和 x 描述符（如 "photo-800w.jpg 800w, photo@2x.jpg 2x"）→ 整个值被浏览器忽略
sizes 只能写在 <img> 上，写在 <source></source> 里会被忽略；省略 sizes 会导致小屏加载大图，浪费带宽