padding-top 配合 relative/absolute 是最稳定兼容的宽高比方案，因 padding 百分比基于父宽计算，可精准实现 16:9 等比例；height 百分比则依赖父高，在响应式中不可靠。
直接用 padding-top（或 padding-bottom）配合 position: relative 和 position: absolute 是目前最稳定、兼容性最好的方式——aspect-ratio 虽然简洁，但 Safari 15.4 之前不支持，iOS 15.4 以下设备会塌陷，生产环境仍需降级方案。
为什么 padding-top 能撑出固定比例高度
CSS 规范里明确：padding-top 和 padding-bottom 的百分比值，始终基于**包含块的宽度**计算，而不是高度。这意味着只要父容器有确定的 width（比如 width: 100% 或 max-width: 800px），padding-top: 56.25% 就永远等于「父宽 × 0.5625」，天然形成 16:9 的高宽关系。
而 height: 56.25% 完全不可靠——它需要父元素有明确高度，响应式场景下几乎不可能满足。
- 常见错误现象：
height: 56.25%写了但容器高度为 0，视频溢出或堆叠在顶部 - 根本原因：父容器没设
width，或写了height: auto/height: 100%却没向上追溯到有高度的祖先 -
padding-top必须用在块级元素上；display: inline或未触发 BFC 的容器会失效
标准写法中每个声明的作用不能省略
一个能跑通的最小可用结构，每个 CSS 声明都承担不可替代的角色：
-
position: relative在父容器上：为子元素的absolute提供定位上下文，否则它会相对于或最近的relative祖先偏移 -
height: 0：清空默认高度，让padding-top成为唯一高度来源；漏掉这句，padding会叠加在原有高度上，比例错乱 -
width: 100%（或具体值）：提供padding百分比的计算基准；如果父容器是flex子项且没设flex-basis，也得显式声明width -
top: 0; left: 0; width: 100%; height: 100%在子元素上：确保<video></video>或<iframe></iframe>真正填满 padding 撑开的空间；只设width: 100%不设height: 100%会导致拉伸
不同比例和实际场景下的参数调整
核心公式就是 (目标高度 ÷ 目标宽度) × 100%，结果保留两位小数即可。别手算，用计算器或直接写 calc() 预编译（注意：CSS 运行时 calc() 不支持除法，必须提前算好）：
- 16:9 →
padding-top: 56.25%（9 ÷ 16 = 0.5625） - 4:3 →
padding-top: 75%（3 ÷ 4 = 0.75） - 21:9（超宽屏）→
padding-top: 42.86%（9 ÷ 21 ≈ 0.42857） - 1:1（正方形）→
padding-top: 100% - 如果视频源本身是 4:3 但要塞进 16:9 容器，记得加
object-fit: cover（<video></video>）或frameborder="0"（旧版<iframe></iframe>），否则默认留黑边或加边框
移动端和 iframe 的特殊注意事项
iFrame 类视频（如 YouTube、Bilibili 嵌入）在移动端更敏感，几个关键点容易被忽略：
- Safari iOS 对
allowfullscreen属性校验严格，必须显式写allowfullscreen=""，否则全屏按钮灰掉 -
iframe默认带border，即使 CSS 清了，某些 UA 样式仍残留，建议加border: none和outline: none - 如果容器外层用了
max-width（比如限制最大 800px），必须同步给父容器设margin: 0 auto居中，否则在大屏上会左对齐 - 不要在父容器上加
overflow: hidden除非真有必要——它可能截断全屏动画或弹出菜单
真正难的不是写出第一版能跑的代码，而是当容器嵌套在 flex/grid/transformed 元素里时，padding-top 的参照宽度是否还可靠；这时候得检查每一层的 width 计算链，而不是盲目加 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
