媒体-查询纵横比

Question

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

代码链接：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>

​