Соотношение сторон медиа-запроса

Question

Я бы хотел изменить цвет фона элемента h1, когда соотношение браузеров равно 4: 3.Я пытался использовать 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>