结论：标签不会自动适配分辨率，必须配合至少一个（含合法media或srcset+sizes）且末尾必须存在并带src和alt，否则浏览器静默回退至兜底图；所有未匹配即失效，常见原因包括media语法错误、type与响应头不一致、漏写或其src。
直接说结论：只写 <picture></picture> 标签不会自动适配任何分辨率；必须配合至少一个 <source></source> 的 media 或 srcset + sizes，且 <img alt="HTML响应式图片picture怎么用_HTML多分辨率适配结构" > 必须存在并带 src，否则浏览器静默回退到那张图——你以为切了，其实全在用 fallback。
为什么写了 却始终只加载 ![HTML响应式图片picture怎么用_HTML多分辨率适配结构]()
的图
这是最常被忽略的“失效”现象。根本原因不是浏览器不支持，而是所有 <source></source> 都没被匹配上，于是无条件走兜底。
-
media值写错：比如写成media="max-width: 768px"（缺括号）或media="768px"，浏览器直接忽略该<source></source> -
srcset单独出现但没配media或type：此时该<source></source>会被忽略，不参与选择 - 服务器返回的
Content-Type和type="image/webp"不一致：比如路径是.webp，但服务端返回text/plain，Chrome 会标记为(blocked:mime-type) - 漏掉
<img alt="HTML响应式图片picture怎么用_HTML多分辨率适配结构" >，或写了但没src：页面图片区域留空，不是报错，是静默失败
media 属性怎么写才真正按屏幕宽度生效
media 是断点适配的核心，但它只认标准 CSS 媒体查询语法，且匹配顺序严格从上到下。
- ✅ 正确写法：
media="(max-width: 480px)"、media="(min-width: 769px) and (max-width: 1200px)"、media="(min-width: 1201px)" - ❌ 错误写法：
media="screen and (max-width: 480px)"（冗余）、media="small"（非法值）、media="480px"（非查询语句） - 多个
media条件重叠时，浏览器取第一个满足的，后面的直接跳过——所以要把更具体的规则（如(min-width: 1440px)）放在前面，宽泛的（如(max-width: 768px)）放最后 - 不要指望
media="(prefers-color-scheme: dark)"单独触发图片切换：它能用，但需配合其他条件（如尺寸）才有实际效果，纯靠它切图目前无浏览器实现
srcset + sizes 怎么配合实现 1x/2x/3x 分辨率适配
当不需要换构图、只希望 Retina 屏自动加载双倍图时，srcset + sizes 比 media 更轻量可靠。
立即学习“前端免费学习笔记（深入）”；
-
srcset中用x描述符：例如photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x，浏览器根据window.devicePixelRatio自动选 -
sizes必须存在且合法：例如sizes="(max-width: 600px) 100vw, 50vw"，告诉浏览器“这张图在小屏占满视口，在大屏占一半”，否则srcset中的w描述符会失效 - 顺序很重要：把
3x图放在最后，因为浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果1x写在最后，2x设备也可能加载1x -
<img alt="HTML响应式图片picture怎么用_HTML多分辨率适配结构" >上也可以加srcset和sizes：它是 fallback，但同样需要适配 DPR，别让它成为性能短板
type 属性为什么不能省，以及怎么避免格式降级失效
type 是现代图片格式（WebP/AVIF）能否真正落地的关键，不是可选项。
-
type值必须是标准 MIME 类型：type="image/webp"✅，type="webp"❌，type="image/jpg"❌（应为image/jpeg） - 服务器响应头
Content-Type必须和type完全一致：WebP 文件返回image/webp，AVIF 返回image/avif，否则浏览器跳过该<source></source> - 顺序即优先级：所有
image/webp的<source></source>必须排在image/jpeg之前，浏览器找到第一个支持的type就停 - 不要在同一个
<source></source>里混用media和type做“双重保险”：它们是正交条件，media控制是否启用该<source></source>，type控制是否选用它；真正健壮的写法是分层：先用media切尺寸，再在每个尺寸内用type切格式
最容易被忽略的其实是 <img alt="HTML响应式图片picture怎么用_HTML多分辨率适配结构" > 的 sizes 属性——它不只是给 <source></source> 看的，当所有 <source></source> 都失效时，这个 sizes 会直接影响 fallback 图片的 DPR 选择逻辑。不填，就等于放弃对兜底图的分辨率控制。
