HTML5的<video>和<audio>标签本身不自带响应式能力，需通过viewport声明、max-width+height:auto基础缩放、aspect-ratio维持比例及媒体查询分层控制来实现自适应，确保不溢出、不变形、加载友好。
HTML5 的 <video> 和 <audio> 标签本身不自带响应式能力，宽度能否随容器或屏幕自适应，完全取决于 CSS 控制逻辑和 HTML 结构配合。关键不是标签写法本身，而是如何让视频区域在不同设备上保持比例、不溢出、不拉伸、加载友好。
确保 viewport 正确声明
这是所有响应式行为的前提。没有它，移动端会以桌面视口渲染，视频可能被压缩成小条或横向滚动。
- 必须在
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免使用
user-scalable=no或maximum-scale=1.0，否则影响可访问性和双击缩放 - 该标签需在任何 CSS 引入之前，防止样式加载抖动
用 max-width + height:auto 控制基础缩放
最通用、兼容性最好的方式，适用于绝大多数项目，包括 IE11+
- 给
<video>添加 class，例如class="video-embed" - CSS 写为：
.video-embed { max-width: 100%; height: auto; display: block; } - 务必移除 video 标签上的
width或height内联属性，否则会覆盖 CSS - 父容器（如
<div>）需有明确宽度（比如width: 100%或max-width: 800px），否则max-width: 100%无参照
用 aspect-ratio 维持固有比例（现代推荐）
避免视频被压扁或留白过多，尤其适合 16:9、4:3 等固定比例内容
立即学习“前端免费学习笔记（深入）”；
- 不直接设 video 尺寸，而是包裹一层容器：
<div class="video-wrapper"><video></video></div> - CSS 中设置：
.video-wrapper { aspect-ratio: 16 / 9; width: 100%; } - 再设 video 样式：
.video-wrapper video { width: 100%; height: 100%; object-fit: cover; } - 如需兼容旧浏览器（如 Safari 15.4 以下），可加 padding-bottom 做后备（例如
padding-bottom: 56.25%）
结合媒体查询做分层控制
当视频需要不同断点下的行为差异（比如手机隐藏 controls、桌面显示完整 UI），用媒体查询精准干预
- 默认小屏样式：controls 默认开启，最大宽度限制为 100vw
- 平板及以上：
@media (min-width: 768px) { .video-embed { max-width: 720px; } } - 桌面端可加
object-fit: contain防裁剪，或用max-height: 60vh防过高 - 注意：媒体查询断点应由内容“开始难看”的临界点决定，而非设备型号
