媒体查询纵横比

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

尝试使用max-aspect-ratio，而不是aspect-ratio。

h1 {
  background-color: red;
}

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

<h1>Hello, World!</h1>