@DredWolf

Почему применяется сразу несколько медиа-запросов?

5f2e7e8c97719030401286.png

Прописал медиа-запросы один за другим (от мобильных, до ноутбука 320px - 1024px), однако стили больших разрешений влияют на стили меньших. В чем проблема?

Вот пример медиа-запроса:

@media (max-width: 425px) {
  .nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
  }
  header {
    background: url(/img/header/bg_header.png) no-repeat bottom/125%;
    background-color: #eceef4;
    height: 100%;
    display: flex;
    .nav__item {
      //отступ между элементами
      margin-bottom: 17px;
      font-family: "Lato";
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #4d4959;
      text-align: center;
      order: 2;
    }
    .logo {
      order: 1;
      margin: 0 auto;
      //отступ от логотипа
      margin-top: 10px;
      margin-bottom: 30px;
      img {
        width: 5em;
      }
    }
  }
}
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Не переопределяйте свойства, которые не изменяются.
Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

Вспомните неравенства в школе. Тут тоже самое.
Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те.
Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
Последовательность записи
Ответ написан
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
Скорее всего у вас медиа запросы перечислены в невенрм порядке, соответственно более нижние перебивают более верхние. Кроме того, сегодня более правильной считается верстка по концепции mobile first, то есть стили идут начиная с мобильных, затем для медиа запросов от меньшего к большему, и условия идут на media (min-width: ХХХpx){}
Ответ написан
Ваш ответ на вопрос

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

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