用 padding-top 百分比实现纵横比是因为其值按父容器宽度计算，可模拟固定宽高比，如56.25%对应16:9；需配合 position: relative 和绝对定位子元素填满区域。
为什么用 padding-top 百分比实现纵横比
因为 CSS 的 padding-top（和 padding-bottom）在块级元素中是相对于父容器宽度计算的，这个特性可以被“借来”模拟固定宽高比。比如设 padding-top: 56.25%，就等效于 16:9 容器（9 ÷ 16 = 0.5625）。它不依赖 JavaScript，兼容所有现代浏览器，且能随父宽自动缩放。
注意：必须配合 position: relative 和子元素 position: absolute; top: 0; left: 0; width: 100%; height: 100% 才能让内容填满该“伪高度”区域。
SCSS 中封装 aspect-ratio Mixin 的正确写法
别直接写死百分比，用参数算——传入宽、高两个整数，自动转成小数并乘以 100%：
@mixin aspect-ratio($width, $height) {
position: relative;
padding-top: percentage($height / $width);
& > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
使用时：@include aspect-ratio(16, 9) → 生成 padding-top: 56.25%；@include aspect-ratio(4, 3) → padding-top: 75%。
- 务必用
percentage()函数，不是手动写#{$height / $width * 100}%，否则 SCSS 编译会报Invalid CSS（除法未被识别为数值） - 子选择器
& > *是保险写法，避免影响嵌套更深的元素；如需更精确控制，可改用类名或指定子元素标签 - 该 mixin 不处理内联替换元素（如
display: block防底部留白
响应式场景下如何动态切换纵横比
不能只在根元素上套一个 mixin，要结合 @media 和 @include 多次调用：
.video-container {
@include aspect-ratio(16, 9);
@media (max-width: 768px) {
@include aspect-ratio(4, 3);
}
@media (max-width: 480px) {
@include aspect-ratio(1, 1);
}
}
关键点：
- 每次
@include都会重写padding-top，所以顺序很重要——移动断点必须写在桌面版之后，否则会被覆盖 - 不要试图用
min-height或height覆盖padding-top，那会破坏比例逻辑；所有尺寸控制必须通过padding-top和 media query 配合完成 - 如果容器本身有
max-width，它的变化会直接影响padding-top计算基准，这是预期行为，不是 bug
常见失效原因和调试建议
页面里写了 mixin 却没看到效果？大概率卡在这几个地方：
- 父容器没有设定
width（比如display: inline或浮动未闭合），导致padding-top百分比失去参照——检查 computed styles 中该元素的width是否为 0 - 子元素没加
position: absolute，或者漏了top/left/width/height四个声明，内容就悬在顶部空白处不动 - 用了
flex或grid布局的父容器，某些旧版 Safari 对padding-top百分比解析异常——加align-items: flex-start或临时换用aspect-ratio原生属性兜底 - SCSS 变量传错顺序，比如写成
@include aspect-ratio(9, 16)，结果得到 177.77%，画面被极度拉高
原生 aspect-ratio 属性（aspect-ratio: 16/9）已在 Chrome 88+、Firefox 89+ 支持，但 IE 和部分安卓 WebView 仍需 padding 方案，Mixin 就是为这事存在的——别省这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
