媒体查询不直接控制音视频播放，但能适配容器布局、控件样式、加载策略和交互方式；需配合viewport声明与弹性结构，采用min-width断点实现移动端优先的渐进增强。
HTML5 多媒体应用中，媒体查询本身不直接控制 <audio></audio> 或 <video></video> 的播放行为，但它能精准适配多媒体内容的容器布局、控件样式、加载策略和交互方式，让音视频在不同设备上既可用又美观。
媒体查询要配合 viewport 和弹性结构才真正生效
必须在 HTML 中声明：<meta name="viewport" content="width=device-width, initial-scale=1">
否则媒体查询检测的“宽度”不是用户看到的视口，而是浏览器默认的 980px（如 iOS Safari），规则会完全失效。
用 min-width 断点实现移动端优先的渐进增强
基础样式（手机）直接写，大屏用 @media (min-width: 769px) 向上增强，避免 max-width 堆叠导致临界值冲突。例如：
- 手机端默认：视频容器全宽、控件紧凑、字幕字号较小
- 平板起（≥769px）：增加左右内边距，控件图标放大，启用画中画按钮
- 桌面端（≥1200px）：并排显示多路视频流，侧边栏嵌入音频波形图
针对多媒体元素的关键适配点
-
<video></video>容器加max-width: 100%; height: auto;防止溢出，再用媒体查询调整aspect-ratio（如16/9→4/3）适配竖屏短视频 -
<audio></audio>的播放器控件在小屏上改用垂直堆叠布局，用flex-direction: column替代横向排列 - 字幕（
<track></track>渲染的文本）通过媒体查询增大font-size和line-height，确保拇指可点区域 ≥44px - 避免在
@media print中隐藏视频——打印样式里可保留标题+时长+描述，方便存档
慎用 device-width，专注视口宽度（width）device-width 匹配物理像素宽度（含 DPR），无法响应横竖屏切换或用户缩放，实际项目中几乎不用。所有断点都基于 width（即 CSS 像素单位下的视口宽度），这是行业事实标准。
调试建议：用浏览器开发者工具模拟真实场景
- 在 Chrome DevTools 的 Device Toolbar 中切换 iPhone SE / iPad Pro / Responsive 模式
- 手动拖动响应式窗口边缘，观察断点是否平滑触发（而非跳变）
- 检查 computed 样式，确认目标元素是否命中预期的媒体查询规则
不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
