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

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。据我所知，它支持野生动物园，但我无法完全理解这个问题。从现在开始谢谢你。如果有任何遗漏的信息，如果你让我知道，我会补充。

标签： csssafari

Answer 1

在 Safari 15 之前的 Safari 中不支持宽高比作为 css 属性，但支持使用具有宽高比的媒体查询@media: (aspect-ratio: 1/1)：https ://caniuse.com/?search=aspect-ratio