@media css Странное поведение media запросов?

Question

[Anton Kaipov]

Хотел адаптировать страницу для Mac (под их разрешение). У меня страница с OnePageScroll и привязана к высоте экрана. Поскольку у Mac`овских разрешений соотношение сторон 4:3, решил добавить media запросы на 4:3 и естественно 16:9. media only screen and (min-device-aspect-ratio: 4/3){...}
media only screen and (min-device-aspect-ratio: 16/9) and (min-device-aspect-ratio: 16/10) and (min-device-aspect-ratio: 21/9){...}
И по ширине подогнать
media only screen and (min-width: 1329px) and (max-width: 2560px) {...}
media only screen and (min-width: 900px) and (max-width: 1328px) {...}

Эти запросы странно себя ведут, перекрывают друг друга, иногда работают два вместе каких то иногда не работает с соотношением 16:9... Ребят, помогите разобраться, какие медиа нужны, чтобы отслеживать соотношения сторон нормально без конфликтов , если сайт с OnePage Scroll`ом (привязан по высоте)?

Comments

[Ankhena]

Неизвестна логика ваших перестроений, поэтому точно не сказать что вам предпринять.

Может, вам поможет объединить условия?

А вот это:

(min-device-aspect-ratio: 16/9) and (min-device-aspect-ratio: 16/10) and (min-device-aspect-ratio: 21/9)

3 минимальных условия в одном запросе с "И" меня очень смущают.
Тоже самое, как вы бы написали выполнись при:

(min-width: 400px) and (min-width: 300px) and (min-width: 600px)

Answer 1

[Andrew Ghostuhin]

Потому что данный метод давно депрецирован, он не рабочий и не просто так https://developer.mozilla.org/en-US/docs/Web/CSS/@...