原生 aspect-ratio 已稳定支持，但需用 Less 封装 @supports 降级方案：输出 aspect-ratio 属性的同时，对不支持环境采用 padding-top + 绝对定位的伪元素技巧，并注意 font-size: 0 避免空白间隙。
原生 aspect-ratio 在现代浏览器已稳定支持，但 Less 本身不解析或转换该属性——它只是 CSS 预处理器，输出什么就取决于你写什么。真正需要解决的，是当目标环境（如旧版 Safari 或 IE）不支持 aspect-ratio 时，如何用 Less 封装一套**降级方案 + 现代语法共存**的可靠实现。
用 aspect-ratio 原生属性 + @supports 降级
Less 不会帮你自动加 @supports，但你可以主动封装一个 mixin，在生成 CSS 时同时输出现代写法和传统 padding-bottom 技巧：
.aspect-ratio(@ratio: 16/9) {
aspect-ratio: @ratio;
@supports (aspect-ratio: 1) = {};
@supports not (aspect-ratio: 1) {
position: relative;
width: 100%;
&::before {
content: '';
display: block;
padding-top: percentage(1 / @ratio); // 如 9/16 → 56.25%
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
调用：.aspect-ratio(4/3);。注意：padding-top 计算必须用 percentage(1 / @ratio)，不是 percentage(@ratio)；否则 4/3 会变成 133.33%，而非预期的 75%。
避免在 Less 中硬编码像素值来模拟宽高比
有人试图用 width: 400px; height: 300px; 模拟 4:3——这根本不是自适应，且无法响应式缩放。Less 的变量或函数不能“推导出容器尺寸”，它只做静态编译。所有依赖运行时容器宽度的方案（比如 padding-bottom），都必须配合 position: relative 和子元素绝对定位才能生效。
- 不要在 mixin 里写
height: round(100% * 3/4)—— Less 的%运算不支持单位混合，且100%是字符串，不是数值 - 不要用
calc()直接算高度：height: calc(100vw * 3/4)会受视口宽高比干扰，且无法约束最大宽高 - 真正的自适应必须基于父容器宽度，padding-bottom 是目前最可靠、兼容性最好的手段
与 CSS-in-JS 或框架（如 React/Vue）集成时的注意事项
如果你在组件中通过 className 应用 Less 封装的 .aspect-ratio，需确保子内容用 > * 选择器能准确捕获——Vue 的 {children} 默认不包裹额外 DOM 节点，但若用了 Fragment 或透传 props 导致多一层 wrapper，> * 就会失效。
更稳妥的做法是显式要求使用者加一层 最易被忽略的一点：padding-bottom 方案下，容器内文本或 inline 元素默认会受伪元素影响产生空白间隙，必须给父容器设 .aspect-ratio__content 选择器；或者改用 :first-child（但有风险，不推荐）。font-size: 0 或给伪元素设 font-size: 0，否则顶部可能出现几像素偏移。这个细节不会报错，但视觉上会“掉下来一点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
