Почему не отрабатывает @media запрос?

Question

[Роман]

@media (min-width: 1920px) {
	header {
		padding: 0 5rem;
	}
}
@media (min-width: 1200px),
@media (min-width: 992px),
@media (min-width: 768px),
@media (min-width: 667px),
@media (min-width: 568px),
@media (min-width: 480px),
@media (min-width: 320px) {
	header {
		padding: 0 3.5rem;
	}
}

Монитор 1600px и все равно показывает

header {
     padding: 0 3.5rem;
}

-------------------
Есть разница в каком порядке стоят media запросы, переставил, вот так и проблема ушла:

@media (min-width: 320px),
@media (min-width: 480px),
@media (min-width: 568px),
@media (min-width: 667px),
@media (min-width: 768px),
@media (min-width: 992px),
@media (min-width: 1200px) {
	header {
		padding: 0 3.5rem;
	}
}
@media (min-width: 1280px) {
	header {
		padding: 0 5rem;
	}
}

Answer 1

[Сергей]

Вообще не понятно зачем медиа запросы через запятую писать. В данном случае media (min-width: 320px) на все разрешения и так сработает, нет смысла перечислять которые выше 320.

Comments

[Роман]

Я это понимаю, в данный момент сделал так, завтра адаптив будет расширяться - в общем мне в данный момент так удобно!

Answer 2

[Mr Crabbz]

@media (min-width: 320px) - означает "при ширине экрана ОТ 320 И ВЫШЕ сделать padding: 0 3.5rem "

@media (min-width: 1920px) - означает "при ширине экрана ОТ 1920 И ВЫШЕ сделать padding: 0 5rem; "

Comments

[Роман]

Поставил вот так, результат тот же!

@media (min-width: 1280px) {
	header {
		padding: 0 5rem;
	}
}
@media (min-width: 1200px),
@media (min-width: 992px),
@media (min-width: 768px),
@media (min-width: 667px),
@media (min-width: 568px),
@media (min-width: 480px),
@media (min-width: 320px) {
	header {
		padding: 0 3.5rem;
	}
}

[Mr Crabbz]

Роман Лазарев, дайте ссылку на ваше демо

[Роман]

ссылка удалена
header .bottom-line .right .top-menu ul li a

[Роман]

Фак .. не думал, что есть разница в каком порядке стоят запросы