HTML中picture标签如何根据视口大小智能匹配图片-html教程-PHP中文网

浏览器按的media属性从上到下匹配首个满足条件的源，匹配即停止；未匹配则加载。关键在于media值合法、顺序正确、覆盖无隙，且必须有src，w描述符需配sizes，sizes仅在上生效。

html中picture标签如何根据视口大小智能匹配图片

浏览器只按 <source></source> 的 media 属性从上到下匹配第一个满足条件的源，匹配后立刻停止；没匹配到就加载 <img> —— 这就是“智能匹配”的全部逻辑，没有自动推断、没有兜底重试。

为什么写了 `media` 却只加载一张图？

不是浏览器不“智能”，而是条件没写对或顺序错了：

media="(max-width: 768px)" 和 media="(min-width: 768px)" 相邻时，如果前者在后，后者永远不生效（因为 768px 宽度先被 max-width: 768px 匹配）
media="768px" 或 media="tablet" 是非法值，浏览器直接忽略该 <source></source>
所有 <source></source> 的 media 都不满足，但 <img> 没写 src，结果页面留白——<img> 的 src 是强制要求，不是可选
用 w 描述符（如 photo-400w.jpg 400w）却漏了 sizes，浏览器无法估算显示宽度，只能退回到 <img src>

`<source></source>` 的 `media` 必须覆盖常见视口断点

断点不是越多越好，关键是连续无空隙。典型三段式写法（从小到大）：

<picture><source media="(max-width: 480px)" srcset="hero-sm.jpg"><source media="(min-width: 481px) and (max-width: 1023px)" srcset="hero-md.jpg"><source media="(min-width: 1024px)" srcset="hero-lg.jpg">
  @@##@@
</source></source></source></picture>

注意：481px 和 1024px 是硬边界，避免相邻区间重叠或遗漏；min-width: 481px 比 min-width: 480px 更安全，防止某些 UA 对边界像素处理不一致。

html-to-pptx

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

下载

如何同时适配视口宽度 + 设备像素比（DPR）？

靠组合：先用 <source></source> 的 media 锁定视口范围，再在每个 srcset 里用 x 描述符响应 DPR：

<picture><source media="(max-width: 480px)" srcset="hero-sm-1x.jpg 1x, hero-sm-2x.jpg 2x"><source media="(min-width: 481px)" srcset="hero-lg-1x.jpg 1x, hero-lg-2x.jpg 2x">
  @@##@@
</source></source></picture>

关键点：

浏览器先看 media：如果是 400px 宽的手机，就进第一个 <source></source>；如果是 1200px 宽的桌面屏，就进第二个
再看当前设备 DPR：DPR=2 时，从已选 <source></source> 的 srcset 中挑 2x 版本；DPR=1 就选 1x
<img src="hero-fallback.jpg" alt="首页横幅"> 的 srcset 不是摆设——当所有 <source></source> 都不匹配时，它得自己扛起 DPR 适配责任