Less实现自适应长宽比容器方法

本文深入探讨了如何在 Less 中优雅实现自适应长宽比容器，既充分利用现代浏览器已稳定支持的原生 `aspect-ratio` 属性，又通过精心封装的 mixin 提供面向旧版 Safari 和 IE 的可靠降级方案——采用 `@supports` 检测 + `padding-top` 百分比伪元素 + 绝对定位子内容的经典组合，并重点揭示了开发中极易踩坑的关键细节：如 `percentage(1 / @ratio)` 的正确计算逻辑、`font-size: 0` 消除空白间隙的必要性、避免硬编码像素值或错误使用 `calc()` 导致响应失效，以及与 Vue/React 等框架集成时选择器兼容性的实战建议，为构建真正健壮、跨浏览器、可维护的响应式布局提供了即开即用的工程化解决方案。

原生 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 的 或 React 的 {children} 默认不包裹额外 DOM 节点，但若用了 Fragment 或透传 props 导致多一层 wrapper，> * 就会失效。

更稳妥的做法是显式要求使用者加一层