直接写 padding-top 百分比能控制视频容器宽高比，因其值按父元素宽度计算；设为高度占比（如16:9时为56.25%），再配合绝对定位子元素即可实现等比缩放。
为什么直接写 padding-top 百分比就能控制视频容器高宽比
因为 CSS 中 padding-top 和 padding-bottom 的百分比值，是相对于父元素宽度计算的，不是高度。这个特性恰好能用来“锁住”宽高比：比如 16:9 的容器，高度应为宽度 × 9/16 = 56.25%，所以设 padding-top: 56.25%，再配合 position: relative 和子元素 position: absolute; top: 0; left: 0; width: 100%; height: 100%，就能让内部 video 或 iframe 撑满且不失真。
Less 的作用不是“生成响应式”，而是把重复的比例计算逻辑抽成可复用的函数，避免手算出错或改一处漏多处。
.aspect-ratio() 混合宏怎么写才真正适配常见视频比例
别用固定数字写死，要用参数算。Less 支持除法运算（需加括号避免被当成 CSS 除法），推荐这样封装：
.aspect-ratio(@w: 16, @h: 9) {
position: relative;
width: 100%;
&::before {
content: "";
display: block;
padding-top: percentage(@h / @w);
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}使用时直接调用：.aspect-ratio(16, 9)、.aspect-ratio(4, 3)、.aspect-ratio(21, 9)。注意两点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
@h / @w（不是@w / @h），因为 padding-top 是「高占宽的比例」 -
percentage()函数会自动转成带 % 的字符串，比手动拼@{ratio}%更安全 - 如果子元素不止一个（比如带 poster 图 + video），建议把
> *换成更具体的类名选择器，避免意外覆盖
移动端横屏下视频被拉伸？检查 video 元素的 object-fit
绝对定位容器只管大小，不管内容如何填充。iOS Safari 和部分安卓浏览器默认对 video 使用 object-fit: fill，导致变形。必须显式声明：
video,
iframe {
object-fit: contain; /* 保持比例，留黑边 */
/* 或 object-fit: cover; /* 填满但可能裁剪 */ */
}常见坑：
-
object-fit不支持 IE，如需兼容，得 fallback 到 JS 动态计算height或用background-image模拟 -
iframe（如 YouTube）本身会控制内部尺寸，object-fit对它无效；此时要靠 iframe 的allowfullscreen和父容器约束，而非 CSS 填充 - 某些安卓 WebView 对
object-fit解析异常，建议加transform: translateZ(0)触发硬件加速
用 @media 切换比例时，Less 变量和媒体查询怎么联动
Less 本身不支持在 @media 内动态重定义变量，所以不能写「在小屏下让 @w 变成 4」。正确做法是：用嵌套媒体查询 + 多个混合宏调用：
.video-container {
.aspect-ratio(16, 9);
@media (max-width: 768px) {
.aspect-ratio(4, 3);
}
@media (orientation: landscape) and (max-height: 500px) {
.aspect-ratio(21, 9);
}
}关键点：
- 每个
@media块内重新调用.aspect-ratio()，它会输出完整样式（含新的padding-top） - 不要试图用
!default变量覆盖，Less 编译时已确定值，运行时无法响应屏幕旋转 - 如果需要 JS 驱动的动态比例切换（如用户点击切换 4:3 / 16:9），那就得放弃纯 Less，改用 class 切换 + 预置好几套
.aspect-ratio-16x9、.aspect-ratio-4x3类
最易被忽略的是：横屏时 viewport 高度变小，但很多设计没考虑「窄高」场景（比如折叠屏、平板横放），21:9 这类超宽比例必须配合 max-height 限制，否则容器会撑爆视口。
