<picture>本身不切换图片，浏览器按顺序匹配首个满足media和type的<source>后加载其srcset，其余跳过；<img>是必需兜底，必须带src和alt，否则空白。
picture 标签本身不切换图片，浏览器按顺序匹配后加载
很多人以为写了 <picture> 就自动“响应式”了，其实它只是个声明式调度容器。真正起作用的是内部 <source> 的匹配逻辑：浏览器从上到下扫描，遇到第一个同时满足 media（视口条件）和 type（格式支持）的 <source>，就加载它的 srcset，其余全部跳过。
常见错误现象包括：
- 所有设备都只加载了
<img>的兜底图 —— 很可能是<source>的media写错了，比如写成768px而不是(max-width: 768px) - 高 DPR 设备（如 iPhone）仍加载 1x 图 —— 因为用了
w描述符却没配sizes，浏览器只能按默认100vw粗估，选错候选值 - 部分浏览器白屏 ——
<source type="image/avif">放最前，但没提供type="image/webp"或通用<img src>fallback，Safari 15 前或旧 Edge 直接跳过所有<source>
media 属性必须写标准媒体查询，且顺序决定优先级
media 不是 CSS 类名，也不是断点别名，必须是合法的媒体查询字符串。比如移动端优先的写法要从窄到宽，否则宽屏规则会提前命中、阻断后续匹配。
推荐写法（移动端优先）：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(max-width: 768px)" srcset="hero-mobile.jpg 1x, hero-mobile@2x.jpg 2x"> <source media="(min-width: 769px) and (max-width: 1200px)" srcset="hero-tablet.jpg 1x, hero-tablet@2x.jpg 2x"> <source media="(min-width: 1201px)" srcset="hero-desktop.jpg 1x, hero-desktop@2x.jpg 2x"> <img src="hero-fallback.jpg" alt="活动主视觉"> </picture>
关键点：
- 断点值要互斥，避免重叠（如
max-width: 768px和min-width: 768px会在 768px 处冲突） - 不要省略单位，
768是无效的，必须写768px -
<img>必须存在且带src，否则整个<picture>在不匹配时渲染为空白
srcset 用 w 还是 x？取决于你控制的是宽度还是像素密度
想按页面中图片实际渲染宽度切图（比如移动端占满屏、桌面端固定 400px），必须用 w 描述符，并配 sizes；想按设备物理像素密度适配（如 Retina 屏自动加载 2x 图），才用 x 描述符。
混用会失效：
-
srcset="a-400w.jpg 400w, a-800w.jpg 800w"→ 必须搭配sizes="(max-width: 768px) 100vw, 400px" -
srcset="a-1x.jpg 1x, a-2x.jpg 2x"→ 可省略sizes，但失去对布局变化的精细控制 -
srcset="a-400w.jpg 400w, a-2x.jpg 2x"→ 整个srcset值被浏览器忽略
Chrome DevTools 的 Network 面板里右键图片 → “Copy image src”，能直接看到最终加载的是哪个 URL，这是验证是否命中预期资源的最快方式。
sizes 属性必须写在 <img> 上，且值要和 CSS 容器宽度一致
sizes 不是设置图片宽高，而是告诉浏览器：“这张图在不同视口下大概占多宽”。如果 CSS 里给图片容器设了 width: 50%，但 sizes 写成 "100vw"，浏览器就会误判渲染宽度，选错 srcset 中的候选图。
典型配合：
<style>
.hero-img { width: 100%; }
@media (min-width: 769px) { .hero-img { width: 50%; } }
@media (min-width: 1201px) { .hero-img { width: 33.33%; } }
</style>
<picture>
<source media="(max-width: 768px)" srcset="hero-400w.jpg 400w, hero-800w.jpg 800w">
<source media="(min-width: 769px) and (max-width: 1200px)" srcset="hero-600w.jpg 600w, hero-1200w.jpg 1200w">
<source media="(min-width: 1201px)" srcset="hero-800w.jpg 800w, hero-1600w.jpg 1600w">
<img src="hero-fallback.jpg" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="英雄区图片">
</picture>
最容易被忽略的一点：sizes 必须写在 <img> 标签上，而不是 <source>；而且它的值必须和真实 CSS 渲染结果对齐 —— 否则再准的 srcset 也白搭。
