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