媒体查询长宽比

Question

当浏览器比例为4：3时，我想更改h1元素的背景颜色。我曾尝试在媒体查询中使用aspect-ratio，但是由于某些原因，它不起作用。我该如何解决这个问题？

链接到codepen：https://codepen.io/s4ek1389/pen/MxWqrg

HTML：

<h1>Hello, World!</h1>

CSS：

  h1 {
      background-color: red;
    }

    @media screen and (aspect-ratio: 4/3) {
      h1 {
      background-color: blue;
    }
    }

Answer 1

尝试使用aspect-ratio代替max-aspect-ratio。

h1 {
  background-color: red;
}

@media (max-aspect-ratio: 4/3) {
  h1 {
    background-color: blue;
  }
}

<h1>Hello, World!</h1>