媒体查询长宽比

时间:2019-02-26 06:43:25

标签: css media-queries aspect-ratio

当浏览器比例为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;
    }
    }

1 个答案:

答案 0 :(得分:0)

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

h1 {
  background-color: red;
}

@media (max-aspect-ratio: 4/3) {
  h1 {
    background-color: blue;
  }
}
<h1>Hello, World!</h1>