CSS

Question

.test {
    width: 20%;
    background: red;
    aspect-ratio: 1/1;
}

<div class="test"></div>

aspect-ratio: 1/1; 除了safari，其他浏览器都可以正常使用。但是这段代码在 Safari 中不起作用。我使用的是 macOS 11.2。我现在已经更新到 macOS 11.5.2。据我所知它支持野生动物园，但我无法完全理解这个问题。从现在开始谢谢你。如果有什么遗漏的信息，如果你告诉我，我会补充的。

Answer 1

Safari 15 之前的 Safari 不支持

作为 css 属性的纵横比，但支持使用具有纵横比 @media: (aspect-ratio: 1/1) 的媒体查询：https://caniuse.com/?search=aspect-ratio

Answer 2

你可以为此添加后备，这个填充 hack 对我有用

.test {
    aspect-ratio: 16/9;
    // Fallback
    @supports not (aspect-ratio: 16 / 9) {
    &::before {
      float: left;
      padding-top: 56.25%;
      content: "";
    }

    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }

CSS - 纵横比：在 Safari 浏览器中不起作用

CSS - aspect-ratio: not working in Safari browser

safari