<picture> 标签提供声明式资源选择机制，依赖 <source> 的 media 与 srcset 配合实现按屏幕宽度切换图片，<img> 为必需兜底；常见只加载一张图的原因包括 media 条件重叠、缺 <img>、srcset 路径 404 或缓存未清；适配高 DPR 应用 x 或 w（不可混用），sizes 必须写在 <img> 上且需与 CSS 容器宽度一致。
<picture> 标签本身不“响应式显示图片”，它只是提供了一套**声明式资源选择机制**；真正起作用的是里面的 <source> 规则 + 浏览器根据当前视口、设备像素比、MIME 类型等条件的匹配逻辑。
怎么写 <source> 才能按屏幕宽度切换图片
核心是用 media 属性配合 srcset，让浏览器在不同断点加载对应尺寸的图：
-
media值必须是有效的媒体查询（如(max-width: 768px)），不能写成768px或small -
srcset里可以放多个路径，用逗号分隔；每个路径后可加w（表示该图的自然宽度）或x（表示设备像素比），例如logo-400w.jpg 400w, logo-800w.jpg 800w -
<img>标签仍是必需的，作为兜底：当所有<source>都不匹配时，浏览器会加载它的src和srcset
<picture> <source media="(max-width: 480px)" srcset="hero-sm.jpg"> <source media="(max-width: 768px)" srcset="hero-md.jpg"> <source media="(min-width: 769px)" srcset="hero-lg.jpg"> <img src="hero-fallback.jpg" alt="Hero image"> </picture>
为什么用了 <picture> 还是只加载一张图
常见原因不是语法错，而是浏览器按规则“选中且仅选中一个”：
- 多个
<source>的media条件重叠（比如写了(max-width: 768px)和(max-width: 1024px)），浏览器取第一个匹配项，后面的直接忽略 - 漏写
<img>，导致无兜底，某些情况下会渲染空白或 fallback 到alt文本 -
srcset路径 404，但浏览器不会报错，只会静默跳过该<source>，继续往下找 - 开发工具 Network 面板没清缓存，看到的仍是之前加载过的图 —— 建议勾选 “Disable cache” 并硬刷新
适配高 DPR 设备（如 Retina 屏）要不要加 x？
要，但别和 w 混用在同一 srcset 里。两者是互斥的描述方式：
立即学习“前端免费学习笔记（深入）”；
- 用
w（推荐）：告诉浏览器“这张图宽 800 像素”，由浏览器结合sizes属性算出需要多大物理尺寸，再选最接近的源。适合响应式布局 - 用
x：直接指定“这个源适用于 2x 屏幕”，例如icon@2x.png 2x。适合固定尺寸图标，不随布局变化 -
sizes必须写在<img>上（不是<source>），例如sizes="(max-width: 600px) 100vw, 50vw"
<picture>
<source media="(max-width: 600px)" srcset="banner-400w.jpg 400w, banner-800w.jpg 800w">
<source media="(min-width: 601px)" srcset="banner-800w.jpg 800w, banner-1600w.jpg 1600w">
<img src="banner-800w.jpg"
srcset="banner-400w.jpg 400w, banner-800w.jpg 800w, banner-1600w.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Banner">
</picture>
实际项目中最容易被忽略的，是 sizes 属性没同步更新 —— 它和 CSS 中图片容器的实际宽度不一致时，w 描述就失效了，浏览器可能选错源。务必在调整布局后重新核对 sizes 值。
