source 标签的 media 属性用于响应式资源选择而非指定媒体类型，其值必须为合法 css 媒体查询；在 中决定首个匹配并加载的 source，在 / 中仅作提示；需按从具体到通用排序并保留无 media 的 兜底。
source 标签的 media 属性不是用来指定“媒体类型（如 video/ogg）”的，那是 type 属性干的事；它是用来做响应式资源选择的——浏览器根据当前视口、设备能力等条件，决定是否加载这个 source。
media 属性值必须是合法的 CSS 媒体查询
它不接受字符串如 "mobile" 或 "desktop"，只能写标准媒体查询语法：
-
media="screen and (min-width: 768px)"—— 桌面端常见写法 -
media="print"—— 打印时才加载该资源 -
media="screen and (orientation: landscape)"—— 横屏时生效 -
media="(prefers-color-scheme: dark)"—— 用户启用了深色模式 -
media="screen and (hover: hover) and (pointer: fine)"—— 有精准指针且支持悬停的设备（如鼠标）
注意：and、not、,（逗号代表 OR）都有效，但括号必须配对，空格不能省略。写错语法会导致整个 source 被忽略，浏览器直接跳到下一个或 fallback 的 img。
media 属性在 和
在 <picture></picture> 中，media 是核心逻辑：浏览器按顺序匹配第一个满足条件的 <source></source>，然后加载其 srcset 或 src；其余跳过。
但在 <video></video> 或 <audio></audio> 中，media 仅作提示——浏览器**可能**据此跳过下载，但规范未强制要求实现该逻辑。实际测试中，Chrome、Firefox 多数情况下仍会预加载所有 source，除非明确设置 preload="none" 并配合 JS 控制。
所以：做图片响应式切换，放心用 <picture> + media</picture>；做音视频响应式码率切换，别只靠 media，得配合 JS 检测网络或分辨率后动态设置 src。
主流浏览器其实都支持 media 属性，但支持程度有差异
查 MDN 和实测（截至 2026 年 4 月）：Chrome、Firefox、Safari、Edge 全部支持 media 在 <picture></picture> 中的语义化匹配；但部分旧 Android WebView 或第三方内核仍会完全忽略 media，直接加载第一个 source。
因此必须遵守两条铁律：
- 所有
<source></source>必须按从“最具体”到“最通用”排序，例如先media="(min-width: 1200px)"，再media="(min-width: 768px)"，最后留一个无media的兜底项 -
<img>标签不可省略，且其src应指向最低兼容性保障的资源（比如 320px 宽的 WebP 或 JPEG）
否则在不支持的环境里，页面可能出现空白或 404。
真正容易被忽略的是：媒体查询里的 device-width 和 width 不是一回事——前者读取物理设备宽度（受缩放、UA 设置影响大），后者读取 CSS 视口宽度（更稳定）。日常响应式优先用 width，别碰 device-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
