因为height:50%依赖父容器高度，而父容器高度常未定义；less仅编译时处理，无法响应尺寸变化，需用aspect-ratio或padding-top等css原生方案实现等比缩放。
为什么直接用 width 和 height 百分比无法实现等比缩放
因为 CSS 中的 height: 50% 是相对于父容器高度计算的，而父容器高度往往未定义（比如默认由内容撑开），导致百分比高度失效。Less 本身不改变这一底层行为，它只是预处理器——所有计算都在编译时完成，无法响应视口或父容器尺寸变化。
真正要实现「等比缩放」（比如 16:9 容器随宽度自适应缩放高度），必须绕过 height 的依赖，转而用 CSS 原生支持的方案，再用 Less 简化其重复逻辑。
- 纯 CSS 推荐用
aspect-ratio（现代浏览器支持，2021+ 主流版本已覆盖） - 兼容旧版（如 IE / Safari padding-top 技巧 +
position: absolute内容层 - Less 的作用是把比例（如
16/9）转为具体padding-top百分比值，避免手算出错
用 Less 变量和除法算出 padding-top 百分比值
固定宽高比容器的核心是：让 padding-top 的百分比值 = 高度 / 宽度 × 100%。例如 4:3 → 75%，16:9 → 56.25%。Less 支持运行时除法运算，可直接写成表达式。
@ratio-w: 16;
@ratio-h: 9;
.aspect-box {
position: relative;
width: 100%;
padding-top: percentage(@ratio-h / @ratio-w); // 编译后为 56.25%
& > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}
注意：percentage() 是 Less 内置函数，会把小数自动转为带 % 的字符串；不要写成 (@ratio-h / @ratio-w) * 100%，那样会被当作单位运算，Less 会报错 Operation on an invalid type。
- 必须用
percentage()包裹除法结果 - 变量名别用
@16by9这类以数字开头的，Less 不认 - 如果比例来自外部配置（如主题文件），确保传入的是数字而非字符串
如何封装成可复用的 Less 混合（mixin）
每次写 padding-top: percentage(...) 很重复，用 mixin 把比例抽象出来更安全。关键点在于：mixin 参数不能默认为 0（除零错误），且要校验输入是否为合法数字。
.aspect-ratio(@w: 16, @h: 9) when (isnumber(@w)) and (isnumber(@h)) and (@w > 0) and (@h > 0) {
padding-top: percentage(@h / @w);
}
// 使用
.video-container {
.aspect-ratio(16, 9);
position: relative;
width: 100%;
& > * { position: absolute; inset: 0; }
}
这个 mixin 加了 when 条件守卫，避免传入非数字或零值导致编译失败。如果你在 Webpack 或 Vite 中用 less-loader，错误会直接出现在终端，但不会生成 CSS —— 这比运行时布局崩塌更容易定位。
- 别漏掉
position: relative和子元素的inset: 0，否则内容不会填满 - 如果容器有 border 或 padding，需用
box-sizing: border-box保证宽高计算准确 - Sass 用户可能习惯用
@function，但 Less 没有运行时函数，只能靠 mixin + 条件守卫模拟
现代写法优先用 aspect-ratio，Less 只做降级兜底
现在 aspect-ratio: 16 / 9 已被 Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持，写法简洁、语义清晰、无需 hack。Less 应该只负责生成兼容 fallback，而不是主逻辑。
.responsive-aspect(@w: 16, @h: 9) {
aspect-ratio: @w / @h; // 原生支持时直接生效
// 降级：仅当不支持 aspect-ratio 时才启用 padding 方案
@supports not (aspect-ratio: 1 / 1) {
position: relative;
width: 100%;
padding-top: percentage(@h / @w);
& > * {
position: absolute; inset: 0;
}
}
}
@supports 是 CSS 规则，不是 Less 功能，但它能被 Less 正常输出。编译后就是标准 CSS @supports 块，现代浏览器跳过 padding 逻辑，老浏览器才执行。这种写法把兼容性判断交给浏览器，比 JS 检测更可靠，也避免了服务端渲染时 UA 判断不准的问题。
实际项目中，aspect-ratio 的兼容性已足够好（CanIUse 数据：全球约 95% 流量支持），真正需要 padding-top 降级的场景，往往集中在企业内网老旧终端或特定嵌入式 WebView —— 这些环境通常连 @supports 都不支持，所以最终兜底还得靠 JS 检测或构建时条件编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
