手机浏览器中aspect-ratio: 1 / 1样式失效如何解决？

发布日期： 2024-10-22 阅读量： 作者： 网络

aspect-ratio: 1 / 1样式在手机浏览器中失效的兼容解决方法

针对问题中提到的aspect-ratio: 1 / 1样式在部分手机浏览器中失效的问题，以下是一些解决方法：

使用padding回退方案

由于css原生的aspect-ratio支持性较差，建议采用使用padding实现的回退方案。以下是aspect ratio boxes：

.aspectratiobox {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /*保持1:1宽高比*/
}
.aspectratiobox-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

# css

上一篇: 微信小程序开发之分页滑动栏代码展示

下一篇: 小程序之JavaScript动态修改样式代码展示

手机浏览器中aspect-ratio: 1 / 1样式失效如何解决？

随便看看