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

Допустим изначально задано правило
ПК
.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 ничего не меняла)
  • Вопрос задан
  • 525 просмотров
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Порядок медиа при сегментации разрешений: обычно от больших (desktop-first) к меньшим (выше - большие, ниже - меньшие; реже применяется подход: mobile-first) или указывайте явно, например:
@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}
от 600 до 800 пикселей включительно.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы