Свойство элемента, которое можно изменить в зависимости от пропорции окна браузера

Question

Я хотел бы изменить высоту основного контейнера моего веб-сайта (div) с определенного значения на другое значение, когда соотношение сторон окна браузера падает ниже 5 / 3.

Я пыталсяэто с @media (max-aspect-ratio: 5/3), но браузеры не принимают это правило во внимание.В Chrome, когда вы переключаетесь в режим проверки, вы видите, что он пропускает правило.Дело не в том, что он видит запрос @media, но пропускает команды в нем из-за приоритетов команд, но даже не видит запрос.Если вы добавите правило, подобное @media (max-height:1024px), в режиме инспектора вы увидите, что правило @media... добавлено в список команд.Однако он полностью пропускает строку @media...aspect-ratio..., так же как она там не была написана.Это не из-за остальной части кода, но сам браузер пропускает запрос.

Есть идеи, как это решить?

@media (max-aspect-ratio: 5/3) {
  .container {
     height:800px
  }
}

Answer 1

Обычно это работает, см. Следующий фрагмент.

Ваша проблема, вероятно, в другом месте

div {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
}

@media (max-aspect-ratio: 5/3) {
  div {
    background: yellow;
  }
}

<div >test</div>