Почему не работает медиа запрос?

Question

[Михаил Литвинов]

Пытаюсь прописать меню для разных устройств, используя список разрешений, но запрос работает некорректно:

@media screen and (max-width: 375px) { 
.nav-bar {
width: 120px;
}
}

@media screen and (min-width: 375px) and (max-width: 600px) { 
.nav-bar {
width: 250px;
}
}

@media screen and (min-width: 600px) and (max-width: 1024px) { 
.nav-bar {
width: 350px;
}
}

Если ставить только 2 запроса без min-width, все работает корректно. Но хотелось бы больше медиа-запросов...

Comments

[Froggyweb]

Хотелось бы примера в песочнице
наверное проще прописать
width:30%; к примеру для всех случаев ли это pixel perfect ^)

Answer 1

[ReActor Дмитрий Вершанский]

Приветствую!
Обратите внимание, что вы пересекаете крайние точки (значения) брейкпоинтов, от запроса к запросу.

Верно будет таким образом (напишу абстрактно)
от 375 до 600
от 601 до 1024
от 1025 и выше

Comments

[Михаил Литвинов]

Спасибо, заработало!

[ReActor Дмитрий Вершанский]

Михаил Литвинов, рад быть полезным!

Answer 2

[kryamk]

Некорректно про некорректно спросили