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

Question

[DredWolf]

Прописал медиа-запросы один за другим (от мобильных, до ноутбука 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;
      }
    }
  }
}

Answer 1

[Ankhena]

Не переопределяйте свойства, которые не изменяются.
Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

Вспомните неравенства в школе. Тут тоже самое.
Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те.
Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.

Comments

[Ankhena]

DredWolf К удаленному модератором вопросу
В том, что тут не 100%

Answer 2

[Lord_Dantes]

Последовательность записи

Answer 3

[ThunderCat]

Скорее всего у вас медиа запросы перечислены в невенрм порядке, соответственно более нижние перебивают более верхние. Кроме того, сегодня более правильной считается верстка по концепции mobile first, то есть стили идут начиная с мобильных, затем для медиа запросов от меньшего к большему, и условия идут на media (min-width: ХХХpx){}