问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

aspect-ratio: 1 / 1样式在部分手机浏览器中失效的问题怎么解决？

头像
_香蕉大神
    98823

    目前测试过的4台移动设备有2台失效了，失效的分别是iPhone X和一台安卓机，这个样式失效该怎么去解决？因为设备的宽度都不一样，并且使用此样式的元素又想保证1:1的宽高比，所以宽度我设置的是100%，高度使用的aspect-ratio: 1 / 1。但是奈何现在有几台设备失效了，就比较麻烦，有大神知道这个样式兼容问题怎么解决吗？或者除此之外其他更好的方法（仅使用css的方式解决）

    csscss3前端
    阅读 6.2k
    3 个回答
    得票最新
    头像
    唯一丶
      23.2k103743
      ✓ 已被采纳

      采用一些适用 padding 来实现的回退方案。

      CSS 原生的 aspect-ratio 现阶段支持性很差，不建议直接使用。

      image.png

      头像
      joy钰
        9.1k53031
        .box {
    width: 100%;
    height: 100vw;
}
        头像
        大桔子
          5882724

          image.png
          代码

          <html>
<style>
  .aspect-ratio {
    width: 70%;
    background-color: red;
    position: relative;
  }
  .aspect-ratio::before {
    content: "";
    display: block;
    padding-bottom: calc(96 / 312 * 100%);
  }
  .aspect-ratio>:first-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
  }  
</style>

<body>

  <div class="aspect-ratio">
    <!-- 真正的元素 -->
    <div>aspect ratio box</div>
  </div>
</body>

</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题