移动端用padding-bottom百分比做响应式视频容器必须满足四个条件：position: relative、width: 100%（flex下加min-width: 0）、height: 0、padding-bottom: 56.25%；子元素需absolute定位并设width/height: 100%、top/left: 0，父容器加overflow: hidden。
直接用 padding-bottom 百分比就能做出稳定响应式视频容器，但移动端最容易失效——不是写法错，而是漏掉了三个强制约束条件。
为什么移动端视频容器常塌陷或比例错乱
移动端浏览器（尤其是 Safari 和旧版 Android WebView）对 CSS 渲染更敏感，padding-bottom 百分比必须基于一个“有明确宽度”的父容器才能生效。而很多移动端布局里，外层用了 flex 或 grid，又没给视频容器设 min-width: 0，导致它拒绝收缩，width: 100% 失效，padding-bottom 就算对了也没基准可依。
- 父容器没设
position: relative→ 子元素position: absolute会定位到body上，视频飘出视口 - 父容器写了
height: auto或没写height→padding-bottom叠加在原有高度上，容器变高、内容溢出 - 父容器被包在
display: flex里，又没加min-width: 0→ 容器宽度卡死，padding-bottom按错误宽度计算
移动端必须写的最小可用 CSS 规则
别拼凑零散样式，这四条缺一不可，顺序也不能乱：
-
position: relative—— 写在包裹容器上，不是video或iframe上 -
width: 100%—— 确保容器能随父级缩放；如果父级是 flex item，额外加min-width: 0 -
height: 0—— 不是可选，是硬性要求；不写就等于把 padding 当边距用 -
padding-bottom: 56.25%—— 16:9 视频用这个值；4:3 改成75%；数值必须现场算：(height ÷ width) × 100%
子元素（video/iframe）怎么填满才不拉伸、不溢出
用 width: 100%; height: 100% 配合 top: 0; left: 0 是唯一可靠方式。Flex/Grid 填充、object-fit 单独用都撑不满 padding-bottom 撑出来的空间。
- 必须加
position: absolute—— 否则无法锚定到padding创建的“隐形高度”边界 - 推荐用
.video-wrapper > *选择器，而不是单独写video和iframe，避免广告层或 wrapper div 漏匹配 - 加
overflow: hidden到父容器 —— Safari 在某些 zoom 场景下会让视频轻微溢出，这个能兜底 -
object-fit: contain比cover更安全；只有确认允许裁剪时才换，且必须配合绝对定位才生效
媒体查询适配不同屏宽时的坑
改 padding-bottom 值本身没问题，但要注意：媒体查询必须作用于同一个容器，且不能和 flex/grid 的轨道尺寸冲突。
- 在
@media screen and (max-width: 768px)里把padding-bottom改成75%（4:3），前提是父容器宽度确实变窄了 - 如果视频容器嵌在
grid里，且轨道是auto，padding-bottom仍按轨道当前宽度算，但轨道可能被截断 —— 更稳妥的是给轨道设minmax(0, 1fr) - 别在媒体查询里改
height或删height: 0—— 这会直接破坏 padding 撑高逻辑
真正难的不是算百分比，而是确保 padding-bottom 的计算基准（父容器宽度）始终真实存在且未被 flex/grid 隐藏。一旦宽度不可靠，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
