CSS如何利用Less快速生成响应式视频容器_比例计算与绝对定位封装

直接写 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 限制，否则容器会撑爆视口。