Как использовать два аспектных отношения в медиа-запросе?

Question

Я пытаюсь установить поведение для разных размеров экрана, например, Я хочу иметь набор правил CSS для любого экрана между соотношением сторон 320x560 и 414x736.

Я уже пытался использовать такой же подход, как и при работе с min-width и max-width.

Здесь все есть: codepen Там вы можете видеть, что у меня есть рабочий пример для закомментированной ширины, но по какой-то причине он не будет работать с соотношением сторон.

@media (min-aspect-ratio: 600px/495px) and (max-aspect-ratio: 1000px/800px){
    div {
    color: yellow;
    }
}

Answer 1

Firefox работает только с точными коэффициентами для меня.

Отношение не является значением само по себе, скорее это результат вычисления. Я не верю, что какой-либо движок CSS предназначен для вычисления текущего соотношения сторон и сравнения его между двумя потенциальными значениями, он работает только с вычисленным в настоящее время соотношением. Вы сможете выполнить это в javascript, если примените прослушиватель к событию изменения размера окна.

Чтобы сделать это в CSS, вам нужно создать несколько медиазапросов, которые определяют минимальную высоту, максимальную высоту, минимальную ширину, максимальную ширину и одно отношение для создания диапазона.

Тем не менее, интересный вопрос, никогда не думал попробовать диапазон пропорций раньше. Было бы полезно реализовать.