HTML中picture标签的使用逻辑-html教程-PHP中文网

浏览器按顺序匹配第一个满足media条件的并立即加载，若全不匹配或语法错误（如media缺括号、单位缺失、顺序不当）则回退到；的src不可省，且srcset与sizes必须协同使用才能正确选图。

html中picture标签的使用逻辑

浏览器只取第一个匹配的 <source></source>，不是“选最优”，而是“碰到就停”——顺序、语法、兜底缺一不可。

为什么写了 `<source></source>` 却总加载 `<img src>`

90% 的失效不是浏览器不支持，而是所有 <source></source> 都被跳过了：

media 值缺括号，比如写成 media="max-width: 768px" → 浏览器静默忽略整条 <source></source>
<source></source> 写在 <img> 后面 → 浏览器直接跳过，不解析
所有 media 条件都不命中（例如断点留了间隙：max-width: 480px 和 min-width: 482px，481px 宽度无匹配）→ 回退到 <img>
type="image/webp" 但服务器返回 Content-Type: text/plain → Chrome 标记为 blocked:mime-type，不加载

`media` 的顺序和写法必须严格

浏览器从上到下线性扫描，匹配第一个为 true 的就终止：

html-to-pptx

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

下载

✅ 正确顺序：宽屏优先 → media="(min-width: 1200px)"，再 media="(min-width: 768px)"，最后 media="(max-width: 767px)"
❌ 错误顺序：把 max-width: 767px 放最前 → 所有 ≤767px 设备永远卡在这条，大屏规则永不触发
⚠️ 避免重叠：同时存在 (min-width: 768px) 和 (max-width: 768px) → 768px 宽度命中前者，后者无效
⚠️ 单位不能省：768 是非法值，必须写 768px

`srcset` 和 `sizes` 不是可选配置

它们控制的是“在已选定的 <source></source> 内，该加载哪个分辨率版本”，不是全局决策逻辑：

sizes 必须写在 <img> 上，<source></source> 上写的会被忽略
用 w 描述符（如 photo-800w.jpg 800w）时，sizes 缺失 → 浏览器按默认 100vw 计算，小屏也可能拉取大图
用 x 描述符（如 icon@2x.png 2x）时，sizes 仍需存在 —— 否则浏览器无法结合视口宽度与 DPR 做上下文判断
<img> 的 src 属性不可省：老浏览器或所有 <source></source> 失效时，它就是唯一渲染依据

什么时候不该用 `<picture></picture>`

它不是 <img> 的升级替代品，而是为特定场景设计的：

需要 art direction（比如手机裁人脸、桌面展全景）→ 用 <source></source> + media
需要格式降级（WebP → JPEG）→ 用 <source></source> + type
仅适配不同 DPR 或视口宽度下的同一构图 → 直接用 <img srcset> 更轻量、容错更强
想靠 JS 动态监听 resize 切图 → <picture></picture> 不适合，它在资源加载阶段就已完成选择，不响应运行时变化

最容易被忽略的点：所有 <source></source> 都是“一次性开关”，一旦匹配失败或语法错误，浏览器不会报错、不会提示，只会安静地 fallback 到 <img src> —— 查问题先看 Network 面板里那些 <source></source> 请求是不是 404 或 blocked。