picture 标签本身无 media 属性，真正起作用的是内部 source 元素的 media 属性，需按 picture → source（可多个）→ img 顺序书写，浏览器自上而下匹配 media，匹配即加载对应 srcset 图片，否则回退至 img 的 src。
Picture 标签本身没有 media 属性，真正起作用的是其内部的 <source></source> 元素的 media 属性。它配合 <img> 一起使用，实现响应式图片切换——即根据视口宽度（或其他媒体条件）加载不同尺寸或格式的图片。
核心结构：picture + source(media) + img
必须按固定顺序写：<picture></picture> 包裹一个或多个 <source></source>，最后紧跟一个 <img>（不可省略）。浏览器从上到下检查 <source></source> 的 media 是否匹配，一旦匹配就加载对应 srcset 中的图片；都不匹配则回退到 <img> 的 src。
<source media="(min-width: 768px)" srcset="hero-large.jpg 1x, hero-large@2x.jpg 2x"></source><source media="(max-width: 767px)" srcset="hero-small.jpg 1x, hero-small@2x.jpg 2x"></source>-
<img src="hero-fallback.jpg" alt="首页横幅">← 必须存在，且无 srcset 或 sizes
media 属性支持常见断点写法
值是标准 CSS 媒体查询表达式，常用基于宽度的判断：
-
media="(min-width: 1200px)"→ 桌面大屏 -
media="(min-width: 768px) and (max-width: 1199px)"→ 平板横向 -
media="(max-width: 767px)"→ 手机竖屏（推荐用这个作兜底） - 也可组合设备像素比：
media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 2)"
注意优先级与执行逻辑
浏览器不会同时加载所有 source，而是顺序匹配、遇真即停：
- 如果第一个
<source></source>的media为 true，就忽略后面的<source></source>和<img> - 务必让宽屏规则在前、窄屏在后（如先写 min-width: 1200px，再写 max-width: 767px），否则小屏可能被宽屏规则“误捕获”
-
<img>是强制 fallback，即使没写 media 也必须提供 src，否则图片不显示
搭配 srcset 和 sizes 更精准控制
单独用 media 只能切图，若还需适配不同缩放比或视口单位，应结合 srcset 与 sizes：
-
srcset列出多个图片资源及其固有宽度（如"photo-400w.jpg 400w, photo-800w.jpg 800w"） -
sizes告诉浏览器“在什么条件下这张图占多宽”，例如sizes="(min-width: 768px) 50vw, 100vw" - 此时
media仍用于粗筛设备类型，sizes + srcset负责细粒度选择
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
