用HTML的picture实现响应式-html教程-PHP中文网

picture标签不是img升级版，而是专为按视口、dpr、格式等条件切换不同图片资源设计；它通过有序匹配实现浏览器端资源决策，仅作必需fallback。

用html的picture实现响应式

picture 标签不是 img 的升级版，它解决的是「不同设备加载不同图片资源」的问题

直接用 <img> 做响应式，只能靠 srcset + sizes 控制分辨率切换（比如 1x/2x），但无法按视口宽度、设备像素比、甚至格式支持情况来切换完全不同的图片文件。而 <picture></picture> 的核心价值，就是让浏览器在渲染前做一次「资源决策」——选哪个 <source></source>，再加载对应图片。

必须按顺序写，浏览器从上到下匹配第一个满足条件的

顺序错了就白写了。常见错误是把宽屏 media 放前面，结果小屏设备也命中了它（因为没写 media 的 <source></source> 默认生效）。

每个 <source></source> 至少带 media 或 type（或两者都有），否则它会无条件匹配
media 用 CSS 媒体查询语法，比如 (min-width: 768px)，不支持 max-width 单独写（要写成 (max-width: 767px)）
type 指 MIME 类型，如 image/webp，浏览器不支持该格式时会跳过这个 <source></source>
最后一个 <img> 是 fallback，必须存在，且必须有 src 和 alt

<picture><source media="(min-width: 1200px)" srcset="hero-large.webp" type="image/webp"><source media="(min-width: 768px)" srcset="hero-medium.jpg"><source type="image/webp" srcset="hero-small.webp">
  @@##@@
</source></source></source></picture>

srcset 和 sizes 在 source 里和在 img 里行为不同

在 <source></source> 中，srcset 只能是「单图地址」或「逗号分隔的 [URL] [descriptor]」，但 descriptor 必须是 w（宽度）或 x（像素密度），不能混用；sizes 也必须写，否则浏览器无法计算加载哪张。

html-deploy

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

下载

如果 <source></source> 用了 srcset + w 描述符，就必须配 sizes，比如 sizes="(min-width: 1200px) 800px, 100vw"
<img src="hero-small.jpg" alt="响应式横幅"> 的 srcset 可以只写 x（如 srcset="logo.png, logo@2x.png 2x"），但 <source></source> 不支持纯 x 切换，必须有 sizes 配合 w
不要在 <source></source> 里写 src —— 它无效，只认 srcset

WebP / AVIF 图片 fallback 要真 fallback，别让老浏览器空请求

Chrome 85+、Firefox 93+ 原生支持 AVIF，但 Safari 直到 16.4 才加，IE 全不支持。如果只写 <source type="image/avif"></source>，Safari 会跳过它，继续往下找；但如果下一个 <source></source> 是 type="image/webp"，而 Safari 也不支持 WebP（旧版），最终就会落到 <img> 的 src。问题在于：有些构建工具或 CDN 会自动把 jpg 转成 webp 并返回 Content-Type: image/webp，但没改文件后缀——这时 type="image/webp" 会误判为支持，导致加载失败（404 或解码错误）。

验证方式：打开 DevTools → Network → 看图片请求的 Response Headers 中 Content-Type 是否匹配 type 属性
稳妥做法：用 type + media 双重约束，例如 <source type="image/avif" media="(min-width: 768px) and (prefers-reduced-motion: no-preference)"></source>
本地开发时，可用 curl -I https://xxx.jpg 看真实 Content-Type，别信文件名