正确使用 <picture> 标签需按视口条件选择不同图片资源：<source> 用 media 定义断点，srcset 提供对应分辨率选项，<img> 为必需兜底；media 必须是合法媒体查询，srcset 在 source 中仅处理设备像素比切换，img 的 src 不可省略且需配 alt。
正确使用 <picture> 标签配合 srcset 和 media，核心是**按视口条件选择不同图片资源，而非让浏览器自动缩放同一张图**。关键在于：<source> 用 media 定义断点规则，srcset 提供该条件下的多分辨率选项，<img> 作为兜底且必须存在。
1. 基础结构不能少：picture + source + img
<picture> 是容器，内部可有多个 <source>，但**必须以 <img> 结尾**。浏览器按顺序匹配 media，找到第一个满足的 <source> 后，就用它的 srcset（和可选的 sizes）决定加载哪张图；没匹配到则用 <img> 的 src 和 srcset。
-
<source>不支持src，只靠srcset+media（或type）生效 -
<img>的src是必需属性，即使写了srcset也得有src - 示例结构：
<source media="(max-width: 768px)" srcset="small-1x.jpg, small-2x.jpg 2x">
<source media="(min-width: 769px)" srcset="large-1x.jpg, large-2x.jpg 2x">
<img src="fallback.jpg" srcset="fallback-1x.jpg, fallback-2x.jpg 2x" alt="描述">
</picture>
2. media 属性写的是 CSS 媒体查询，不是像素值
media 的值必须是合法的媒体查询字符串，比如 (max-width: 768px)、(min-width: 48em)、(prefers-reduced-motion: reduce)。它不接受纯数字或自定义关键词。
- 避免写成
media="768px"或media="tablet"—— 这些无效，浏览器会忽略该<source> - 断点建议与 CSS 保持一致，方便维护（如用
48em对应 768px） - 多个条件可用
and组合，例如：media="(min-width: 769px) and (orientation: landscape)"
3. srcset 在 source 中只管“分辨率切换”，不负责“宽度适配”
当 <source> 匹配成功后，它的 srcset 仅用于在满足该 media 条件的设备上，根据设备像素比（dpr）选图（如 1x/2x）。它不会根据元素宽度变化选图——那是 sizes 的事。
- 如果只需适配 dpr，用
srcset="a.jpg, b.jpg 2x"即可 - 如果图片在页面中宽度会变（比如全宽 banner），需配合
sizes属性告诉浏览器“这张图大概占多宽”，浏览器才能量化选择最合适的srcset项 - 正确带 sizes 示例：
<source media="(max-width: 768px)" srcset="sm-400w.jpg 400w, sm-800w.jpg 800w" sizes="100vw">
4. img 标签仍需 src 和 srcset，且不可省略
<img> 是 <picture> 的降级出口，也是无障碍和 SEO 的基础。即使所有 <source> 都匹配，浏览器仍会读取 <img> 的 src 作为默认图源（尤其在 JS 禁用或解析异常时）。
-
src必须是单张图地址（不能是逗号分隔列表），建议提供中等尺寸、通用兼容的版本 -
srcset可继续提供 dpr 适配，增强高分屏体验 -
alt属性必须写，且描述准确，不可为空或仅用文件名
