media属性仅在<source>标签中有效，必须为合法CSS媒体查询（如(min-width: 768px)），浏览器按从上到下顺序匹配首个为true的条件并加载对应资源，其余跳过；<picture>自身加media无效，<img>必须作为最后子元素提供兜底。
media 属性值必须是媒体查询表达式，不能写 CSS 类名或自定义字符串
很多人误以为 media 属性像 class 一样可以填任意名字，比如 media="desktop" —— 这完全无效。media 只接受标准的媒体查询语法，浏览器会按顺序匹配这些表达式，选中第一个为 true 的 source，然后加载其 srcset 或 src。
常见有效写法包括：
-
media="(min-width: 768px)"：宽度 ≥ 768px 时启用该source -
media="(max-width: 479px) and (orientation: portrait)"：窄屏竖屏设备 -
media="(prefers-reduced-motion: reduce)"：用户开启减少动画偏好时（可用于降级动图） -
media="(min-resolution: 2dppx)"：高 DPI 屏幕（注意兼容性，Safari 旧版需-webkit-min-device-pixel-ratio: 2）
必须配合 source 标签使用，且 picture 内部顺序决定优先级
<picture> 本身不支持 media 属性，它只起容器作用；真正起作用的是内部的 <source> 元素。浏览器从上到下依次检查每个 <source> 的 media 表达式，一旦匹配就停止，不再往后看。
所以顺序很关键：
立即学习“前端免费学习笔记（深入）”；
- 把最具体的、覆盖小范围设备的
<source>放前面（如max-width: 479px） - 把兜底的、无
media的<img>放最后（它没有media属性，相当于默认 fallback） - 别漏掉
<img>标签 —— 它不是可选的，是必需的渲染载体，所有<source>都只为它提供候选资源
错误示例：
<picture> <source srcset="small.jpg" media="(min-width: 768px)"> <source srcset="large.jpg"> <img src="fallback.jpg" alt="..."> </picture>这里第一个
source 实际永远不会被选中，因为 min-width: 768px 在小屏下为 false，而第二个没写 media，浏览器直接跳过它去用 <img> —— 但 <source> 没 media 是合法的，只是语义上容易混淆；更稳妥写法是明确写 media="(min-width: 0)" 或直接靠 <img> 托底。
media 和 sizes 属性分工不同，别混用
media 控制“要不要加载这个资源”，sizes（写在 <img> 或 <source> 上）控制“这个资源应该按多大尺寸渲染”。两者常一起出现，但职责分离：
-
<source media="(max-width: 600px)" srcset="small-400w.jpg 1x, small-800w.jpg 2x">：只在 ≤600px 宽度时考虑加载这组图 -
<img src="default.jpg" sizes="(max-width: 600px) 100vw, 50vw" srcset="..."></img>：告诉浏览器，在 ≤600px 时按视口全宽渲染，否则按视口一半宽渲染，再据此从srcset里挑最合适的分辨率图
如果只写 media 不写 sizes，浏览器仍能切换图片，但无法优化 DPR 匹配；反之，只写 sizes 不写 media，则所有设备都会参与 srcset 分辨率选择，失去设备类型/断点区分能力。
实际响应式组合建议：移动优先 + 明确断点 + fallback 必须存在
一个实用的三段式结构：
- 第一
<source>：media="(max-width: 479px)"，配小图 + 简化格式（如 WebP） - 第二
<source>：media="(min-width: 480px) and (max-width: 1023px)"，中等图 + WebP - 第三
<img>：不带media，src给 JPEG fallback，srcset给高清图，sizes写清楚布局占比
注意：479px 和 480px 的边界要无缝衔接，避免中间空档；<img> 的 src 值虽可能不被加载，但仍需是有效路径 —— 否则在不支持 <picture> 的老浏览器（如 IE）里会显示破图。
最易被忽略的一点：media 查询里的单位必须是 CSS 单位（px、em、rem），不能用 vh/vw 做条件（它们不能用于 media 属性，仅适用于 sizes）。
