HTML中picture标签和source配合-html教程-PHP中文网

浏览器按顺序匹配第一个满足条件的，未匹配则回退到；常见原因包括缺media/type、media语法错误（如漏括号）、content-type与type不匹配、safari中缺src致空白，media与srcset正交配合，sizes必须写在上且断点需互斥。

html中picture标签和source配合

浏览器只按顺序匹配第一个满足条件的 <source></source>，一旦没匹配上，就直接 fallback 到 <img> 的 src——这不是 bug，是规范行为。常见原因包括：

<source></source> 没写 media 也没写 type → 整条被忽略
media="(max-width: 768px)" 写成 media="max-width: 768px"（漏括号）→ 解析失败，不匹配
服务器返回 image/webp 文件，但响应头是 Content-Type: image/jpeg → 浏览器静默跳过该 <source></source>
Safari 16.4 之前版本中，<img> 缺 src → 页面空白，控制台无报错

media 控制“用不用这张源”，srcset 控制“在这张源里选哪个分辨率”。两者正交，不能互相替代：

html-deploy

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

下载

某个 <source></source> 匹配成功，但它的 srcset 里只有 400w 和 800w，而当前渲染宽度是 600px → 浏览器选最接近的（通常是 800w），不会跨 <source></source> 查找
sizes 必须写在 <img> 上，且值要和 CSS 实际渲染宽度一致；比如图片在移动端占满视口，就得写 sizes="(max-width: 768px) 100vw, 50vw"
srcset 中用 w 描述符（如 "hero-400w.jpg 400w"）必须配 sizes 才能算出物理尺寸；只用 x（如 "a.jpg 2x"）只适配 DPR，不解决尺寸切换

顺序决定匹配优先级，从上到下，命中即停。典型错误是断点重叠或单位缺失：

写成 media="(max-width: 768px)" 和 media="(min-width: 768px)" → 在 768px 宽度下，两条都可能匹配，但浏览器只取第一条，第二条永远不生效
正确写法是互斥断点：max-width: 768px、min-width: 769px) and (max-width: 1200px)、min-width: 1201px
所有 media 值必须带单位（768px），写 768 是无效媒体查询
<img> 必须作为 <picture></picture> 的最后一个子元素，且必须含 src 和 alt；否则不匹配时页面空白

浏览器只在 DOM 插入或窗口 resize 时重新评估 media，不监听属性变化。直接改 source.media 不会触发重选：

修改后手动调用 pictureElement.querySelector("img").src = "" 强制重载 → 破坏缓存，不推荐
更稳妥的是重建整个 <picture></picture> 结构，或用 matchMedia() 监听并显式切换 <img> 的 src
注意：用 display: none 隐藏 <picture></picture> 时，Chrome 会暂停所有 <source></source> 加载，包括已匹配的——这是规范行为，不是 bug