media属性仅参与响应式源选择而不控制播放，浏览器按顺序匹配media值（CSS媒体查询）并加载首个匹配且格式支持的<source>，省略时等价于"all"，不支持JS动态修改。
media 属性在 <source> 中不控制播放，只参与响应式源选择——它让浏览器根据当前视口或媒体特性（如宽高、横竖屏、分辨率）决定是否加载该 <source>。
media 属性如何触发源选择逻辑
浏览器按 <source> 顺序遍历，对每个元素检查其 media 属性值是否匹配当前环境。一旦匹配，就停止查找并使用该源（前提是格式也支持）。它不改变已加载媒体的播放行为，也不回退到上一个源。
-
media值是 CSS 媒体查询字符串，例如"(min-width: 768px)"或"(orientation: landscape)" - 若省略
media，等价于media="all"，即始终参与候选 - 多个
<source>可共存，但最终只加载一个（由media+type+ 浏览器支持度共同决定） - 注意：不支持 JS 动态修改
media后重新触发选择；需替换整个<source>节点或重载<video>/<audio>
常见 media 值写法与实际效果差异
写错媒体查询会导致源完全被跳过，尤其要注意语法严格性和单位缺失问题。
-
media="(min-width: 768px)"✅ 匹配宽度 ≥ 768px 的视口 -
media="min-width: 768px"❌ 缺少括号，被当作无效查询，等同于media="not all"，源被忽略 -
media="(max-height: 400px) and (orientation: portrait)"✅ 同时满足两个条件才启用 -
media="(prefers-reduced-motion: reduce)"✅ 可用于为动效敏感用户提供简化音视频（如静态封面图替代动态预览）
和 srcset、sizes 混用时的优先级关系
<source> 的 media 和 <img> 的 srcset + sizes 解决的是不同层级的问题：前者控制“是否考虑这个源”，后者控制“选哪个分辨率文件”。它们可以共存，但不互相替代。
- 对于
<video>，<source>的media决定“用不用这个轨道”，而每个<source>自身不能带srcset（HTML 规范不支持） - 想实现同一
<source>内部的分辨率切换？不行。必须拆成多个<source>，各自带media和独立src - 如果同时用了
src属性和<source>，浏览器会优先走<source>流程；src仅作兜底（无匹配<source>时才加载）
调试 media 不生效的三个关键检查点
多数问题不是 media 写错，而是上下文没对齐。
- 确认父元素是
<video>或<audio>，且没有提前结束标签（如<source />在某些 HTML 解析器中可能被忽略） - 用 DevTools → Elements 面板查看对应
<source>是否被标记为 “not selected”；再切到 Console 执行window.matchMedia("(your-query)").matches验证当前环境是否真匹配 - 检查是否因
type不支持被跳过：比如写了media="(min-width: 1024px)" type="video/webm"，但浏览器不支持 webm，那即使媒体查询为真也不会选它
真正难调的不是语法，而是多条件组合下各设备的实际解析差异——比如 iPad Safari 对 (hover: hover) 的判定和 Chrome Desktop 完全不同，建议用真实设备录屏+网络面板交叉验证加载结果。
