picture标签通过source元素的media属性实现art direction，即按屏幕尺寸切换不同构图的图片；sizes配合srcset可精确控制响应式图片宽度与分辨率适配；img作为兜底且承载唯一alt文本，确保可访问性。
picture 标签通过 source 元素配合 media 或 srcset + sizes 属性，实现 art direction —— 即根据不同屏幕尺寸、设备特性，**主动选择语义上更合适（不一定是分辨率更高）的图片版本**，比如手机端裁剪特写人脸、桌面端展示全景。
用 media 属性按断点切换不同构图的图片
这是 art direction 的核心用法：为不同视口宽度提供完全不同的图片资源（不同裁剪、不同焦点、甚至不同内容）。
-
source元素放在picture内，每个带media属性（如(max-width: 768px)），声明适用条件 -
浏览器从上到下匹配第一个满足条件的
source，加载其srcset指定的图片 - 必须在最后放一个
img标签作为兜底（无匹配时使用，且供不支持picture的老浏览器降级）
<source media="(max-width: 480px)" srcset="hero-mobile.jpg">
<source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
<img src="hero-desktop.jpg" alt="活动主视觉">
</picture>
结合 sizes 精确控制响应式图片宽度
当需要为同一张图提供多分辨率版本（如 1x / 2x），或图片在页面中占据的视口比例随断点变化时，sizes 告诉浏览器“这张图在不同条件下大概占多宽”，再由 srcset 提供对应尺寸的资源。
-
sizes是字符串，包含媒体条件和长度值，例如sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset列出多个资源及其宽度描述符（如"small.jpg 480w, medium.jpg 960w, large.jpg 1440w"） - 浏览器根据
sizes计算出目标显示宽度，再选最接近的srcset项加载
<source
media="(max-width: 600px)"
srcset="hero-crop-sm-480w.jpg 480w,
hero-crop-sm-960w.jpg 960w"
sizes="100vw"
>
<source
media="(max-width: 1200px)"
srcset="hero-crop-md-960w.jpg 960w,
hero-crop-md-1440w.jpg 1440w"
sizes="50vw"
>
<img
src="hero-full-1440w.jpg"
srcset="hero-full-1440w.jpg 1440w,
hero-full-2880w.jpg 2880w"
sizes="33vw"
alt="品牌故事"
>
</picture>
注意 fallback 和可访问性
art direction 不是单纯换分辨率，而是换内容表达。因此语义和可访问性不能妥协：
- 每个
source对应的图片，如果构图差异大（如人脸 vs 全景），alt文本应统一描述核心信息，而非具体画面细节 -
img的alt是唯一被读屏器读取的内容，必须准确传达意图（例如 “春季新品发布现场” 而非 “一张蓝背景人像”） - 避免仅靠 CSS 隐藏/显示图片做 art direction —— 这无法阻止多余图片下载，也不具备语义
验证是否生效
打开浏览器开发者工具 → Network 面板，调整窗口宽度并刷新，观察实际加载的是哪个 source 的图片；也可在 Elements 面板中查看 picture 下高亮的生效 source 元素。
