media属性仅在<source>标签内生效，写在<picture>上被浏览器忽略；<source>须置于<img>前、顺序从宽到窄、media值需带完整括号，且<img>必须存在并含src与alt。
media属性写在里才生效，上加没用
浏览器只认 <source> 标签内的 media 属性，<picture> 自身加 media 完全被忽略。常见错误是把断点逻辑写在 <picture> 上，结果所有 <source> 都不匹配，直接 fallback 到 <img src>。
必须确保：
-
<source>在<img>之前，顺序错则整条被跳过 -
media值是合法 CSS 媒体查询字符串，带完整括号：✅media="(min-width: 768px)"，❌media="min-width: 768px"（缺括号，静默失效） -
<img>必须存在，且含src和alt，否则整个<picture>渲染失败
用type属性优先加载WebP/AVIF，media只管宽度断点
media 本身不识别图片格式，它只做视口宽度判断；真正控制格式切换的是 type 属性。浏览器按 <source> 顺序检查 type，遇到第一个自己支持的就加载对应 srcset，其余跳过。
典型写法是把高优格式（如 AVIF）放前面，低优格式（如 WebP）居中，JPG 作兜底：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 1024px)" srcset="hero.avif" type="image/avif"> <source media="(min-width: 1024px)" srcset="hero.webp" type="image/webp"> <source media="(max-width: 1023px)" srcset="hero-mobile.avif" type="image/avif"> <source media="(max-width: 1023px)" srcset="hero-mobile.webp" type="image/webp"> <img src="hero.jpg" alt="活动主视觉"> </picture>
注意：media 和 type 是并行条件，两者都需满足才启用该 <source>；但 type 不影响匹配顺序，只过滤支持性。
断点顺序必须从宽到窄，否则小屏永远卡第一条
浏览器从上到下扫描 <source>，一旦某条 media 为 true 就立即加载、停止后续判断。如果把 max-width 放最前，比如 media="(max-width: 767px)"，那所有宽度 ≤767px 的设备（包括手机、平板横屏、甚至部分桌面缩窗）都会命中它，后面更宽的规则根本没机会执行。
正确顺序示例：
- 桌面端（≥1200px）→ 加载 AVIF 大图
- 平板（768px–1199px）→ 加载 WebP 中图
- 手机（≤767px）→ 加载 WebP 小图
对应代码要严格按此顺序排列，且数值区间不能重叠或留空，否则出现未覆盖的视口宽度，就会 fallback 到 <img>。
分辨率适配靠srcset + sizes，不是靠media
media 只管“什么宽度用哪张图”，不管“同一宽度下该用 1x 还是 2x”。要让 Retina 屏自动加载双倍图，必须用 srcset 提供多密度源，并配 sizes 告诉浏览器这张图在页面中大概占多宽。
例如：
<source media="(min-width: 1024px)"
srcset="hero-1200w.jpg 1x, hero-2400w.jpg 2x"
sizes="(min-width: 1024px) 1200px, 100vw">
这里 sizes 告诉浏览器：在 ≥1024px 视口时，这张图显示宽度约 1200px；浏览器再结合设备 DPR（比如 2x），就知道该选 hero-2400w.jpg。
容易忽略的点：sizes 必须存在，否则浏览器无法估算目标宽度，srcset 中的 w 描述符就失去意义，可能退化成只加载第一个资源。
