padding-top百分比值按父元素宽度计算，故padding-top: 56.25%可实现16:9宽高比，配合height: 0和position: absolute子元素达成纯css响应式占位。
SCSS 本身不能创建“响应式高度”，它只是编译时预处理器，所有计算都在构建阶段完成；所谓“padding-top 黑科技”真正起作用的是 CSS 运行时行为，SCSS 只负责帮你把比例算对、写得更安全。
为什么直接写 padding-top: 56.25% 能锁住 16:9
CSS 中 padding-top 和 padding-bottom 的百分比值，永远按父元素的 宽度 计算，而不是高度。这个特性不是 bug，是唯一能用纯 CSS 在无 JS 情况下实现“宽高联动”的机制。
- 16:9 容器：高度应为宽度 × 9/16 = 0.5625 →
padding-top: 56.25% - 4:3 容器：9 ÷ 4 = 0.75 →
padding-top: 75% - 必须配合
height: 0，否则 padding 会叠加在原有高度上，导致容器过高 - 子元素必须用
position: absolute填满这个“空白占位区”，否则内容不显示
@function aspect-ratio() 怎么写才不翻车
别手敲小数、别硬编码字符串。SCSS 函数应该做两件事：接收宽高参数、返回带 % 的合法 CSS 值。
- 正确写法：
@function aspect-ratio($w, $h) { @return percentage($h / $w); } - 错误写法：
@return #{$h / $w * 100}%—— 浮点精度丢失（如 9/16 得 56.249999999%），某些浏览器解析失败 - 调用示例：
.video-16x9 { padding-top: aspect-ratio(16, 9); } - 注意：除法必须加括号
($h / $w)，否则 SCSS 会误判为 CSS 除法语法而报错
用 @mixin ratio-container() 封装完整结构
只封装 padding 是不够的，一个可用的视频容器需要定位上下文、子元素规则、box-sizing 等一整套。
- 必须设
position: relative在容器上，否则absolute子元素会脱离文档流乱飘 - 子选择器别用
> *，容易覆盖 poster 图、loading 层等兄弟节点；改用> video, > iframe - 加
box-sizing: border-box，避免边框或内边距破坏 padding 占位精度 - 示例 mixin：
@mixin ratio-container($w: 16, $h: 9) {
position: relative;
width: 100%;
height: 0;
padding-top: aspect-ratio($w, $h);
box-sizing: border-box;
<p>> video,
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}</p>
移动端视频拉伸？object-fit 不是可选项
padding-top 控制的是容器大小，但不管内部视频怎么“贴图”。iOS Safari 和多数安卓浏览器默认用 object-fit: fill，结果就是画面被强行拉满、五官变形。
- 必须显式设置：
video { object-fit: cover; }（推荐）或object-fit: contain -
cover：等比缩放+裁剪，填满整个区域，适合封面/主视觉 -
contain：等比缩放+居中，保留黑边，适合教学/演示类视频 - 旧版 Bootstrap（object-fit- 工具类，得自己加或内联 style
- 微信 iOS 客户端（v8.0.4x）识别
aspect-ratio但渲染异常，此时 padding-top +object-fit是唯一可靠组合
最易忽略的一点：SCSS 写得再漂亮，也救不了没加 height: 0 或漏掉 position: relative 的容器——它们会在不同设备上随机失效，而且很难复现。动手前先默念三遍：height-zero、position-relative、object-fit。其他都是锦上添花。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
