padding百分比能维持宽高比，因其值按包含块宽度计算而非高度，结合height:0和position:absolute可实现响应式比例容器，但需确保父容器有明确宽度且避免flex/grid干扰。
padding 百分比为什么能维持宽高比
因为 padding-top 或 padding-bottom 的百分比值，是相对于**包含块的宽度**计算的，不是高度。这个特性被广泛用于创建响应式正方形、16:9 容器等固定比例区域。
关键前提是：容器必须有明确的宽度（比如 width: 100%），且不能依赖内容撑开；否则百分比 padding 会失效或计算异常。
- 只设
padding-top: 56.25%（16:9）+height: 0，就能让容器高度随宽度缩放 - 内部内容需用
position: absolute覆盖填充区域，否则会被 padding 推开 -
box-sizing: border-box不影响 padding 百分比的计算逻辑，但它确保 padding 不额外增加尺寸——这点常被忽略
标准响应式宽高比容器写法
以下是最小可靠模板，适配所有现代浏览器：
.aspect-ratio-16x9 {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
box-sizing: border-box;
}
.aspect-ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}注意：box-sizing: border-box 在这里不是为 padding 百分比服务的，而是防止你后续加 border 或 padding 时破坏比例——一旦加了，又没设 border-box，容器实际尺寸就超出了预期。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：flex / grid 容器里 padding 百分比失效
当父容器是 display: flex 或 display: grid，且未显式设置宽度时，子元素的 width: 100% 可能不成立，导致 padding-top: 56.25% 按照一个不可预期的“宽度”计算（比如 0 或默认最小宽）。
-
解决方法：给该元素父级加
width: 100%或min-width: 0（对 flex item 有效） - 更稳妥做法：改用
aspect-ratioCSS 属性（Chrome 88+、Firefox 89+、Safari 15.4+ 支持），例如aspect-ratio: 16 / 9，它不依赖 padding，也不受父容器 display 类型干扰 - 兼容性兜底时，不要混合用
aspect-ratio和 padding 技巧，容易互相覆盖
移动端适配中容易被忽略的细节
在 iOS Safari 或某些 Android WebView 中，viewport 缩放、横竖屏切换可能让视口宽度抖动，造成 padding 百分比短暂错位。这不是 bug，而是计算时机问题。
- 避免在
@media中仅靠max-width切换 padding 值，应统一用相对单位 - 如果内容需要固定像素尺寸（比如图标大小），别把
font-size或width写死，改用clamp()或vmin单位 -
box-sizing: border-box必须全局声明在* { box-sizing: border-box }，否则局部设置易遗漏，尤其在第三方组件嵌套时
真正难的不是写出比例容器，而是在复杂布局嵌套、动态加载、多端兼容场景下，让那个 padding-top 始终按你认为的“宽度”去算。
