@Mafi518

Media применяется не на тех значениях, которые указываются, хелп?

В общем заверстал я макет, сел за адаптацию, пишу первый запрос допустим

@media screen and (max-width: 1600px) {
    body {
        display: none;
    }
}


По логике при ширине в 1600px весь body должен стать display none, но происходит это не на 1600, а на 1280 px
Больше запросов нет, он один единственный, если добавлять новые, то они также непонятно как высчитываются и срабатывают на разрешении в несколько раз меньше, первый раз с таким сталкиваюсь
Мета тоже стоит – meta(name="viewport" content="width=device-width, initial-scale=1.0")
Самое забавное, та же самая запись media работает в другом макете, а в этом нет
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 3
DanArst
@DanArst
Э, Ойboy!
Потому что у вас по логике он срабатывает при ЛЮБОЙ ширине не более 1600px, а 1280px входит в эту категорию. Поэтому вы должны дописать условие с min-width.

Во-вторых media-запросы работают в каскадном порядке, поэтому важен также порядок расположения media-запросов в CSS-файле, если вдруг вы не хотите указывать min-width. Каждый запрос всегда будет перекрывать предыдущий
Ответ написан
@Steppp
Так max-width: 1600px - это максимальная ширина! А то что на 1280, так там планшет!
пиши min-width: 1600px - это от 1600 и больше

По идеи так должно быть,
.css {
  код десктоп 
  // тоесть выполняется всегда
}
@media (max-width: 1023px) {
  .css {
    код планшет 
      // выполняется если разрешение меньше 1023рх
  }
}
@media (max-width: 767px) {
  .css {
    код мобила
    // выполняется если разрешение меньше 767px
  }
}


БЕЗ screen and
Ответ написан
Проверьте нет ли масштабирования страницы в браузере или глобально в системе
Ответ написан
Ваш ответ на вопрос

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

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