Почему медиа-правила диапазона планшета перекрывают правила ПК версии, при этом когда ты находишься ещё в диапазоне ПК?

Question

[Наталия]

Допустим изначально задано правило
ПК
.section{
height: 1000px;
}
Потом адаптив
media screen and (max-width: 992px) {
height: 1700px;
}
media screen and (max-width: 763px) {
height: 2000px;
}
media screen and (max-width: 576px) {
height: 2300px;
}

И вот пока еще находясь в диапазоне ПК уже срабатывает на десктопе правило второго диапазона и в итоге компьютерной версии высота секции 2000px, а не 1000px.
(в других диапазонах все работает правильно)
из-за чего это?
может это сбой какой нибудь, ведь то этого все работало и как только я поменяла высоту этого второго диапазона с 2100px на 2000px получилось это... (в html ничего не меняла)

Comments

[Brad9aga]

https://jsfiddle.net/
https://codepen.io/pen/

[Ольга Ветер]

как бы то ни было, очень плохая идея задавать фикс высоты для больших блоков..

Answer 1

[xmoonlight]

Порядок медиа при сегментации разрешений: обычно от больших (desktop-first) к меньшим (выше - большие, ниже - меньшие; реже применяется подход: mobile-first) или указывайте явно, например:

@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}

от 600 до 800 пикселей включительно.

Для экрана - есть медиа-запрос ориентации положения экрана (добавить к условию, правее):
and (orientation: landscape)или and (orientation: portrait)

Comments

[Ankhena]

Порядок зависит от подхода, mobile-first или наоборот. А вовсе не всегда в одну сторону.

[xmoonlight]

Ankhena, в основном - desktop-first, mobile-last.
А так - согласен!

Answer 2

[Vladyslavislove]

Проверь ширину всех блоков