媒体查询宽高比

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>