Как правильно использовать @media?

Question

[mosikus]

Пытаюсь сделать верстку, прописываю, например

@media all and (max-width: 360px) and (max-height: 640px) {
*стили*
}

работает нормально.
Прописываю второй media

@media all and (max-width: 411px) and (max-height: 731px) {
*стили*
}

и уже к размеру меньше присваивается большее значение, то есть стили меньшего экрана игнорируются. Как правильно делать ?

Comments

[alex-1917]

Когда вы полностью осознаете, что mobilefirst идеален во всем, то больше никогда не будете верстать декстоп-first

[xonar]

Порой не всегда. Особенно когда нет макета мобильной версии.

Answer 1

[WapSter]

Если верстал под десктоп то от большего к меньшему экрану должны быть в вашем случае, вот так -

*стили*

@media all and (max-width: 411px) and (max-height: 731px) {
   *стили*
}

@media all and (max-width: 360px) and (max-height: 640px) {
   *стили*
}

.
При mobilefirst наоборот

Answer 2

[Ankhena]

Потому что вторая группа правил перебивает первую. Пишите в обратном порядке.

Answer 3

[leni_m]

1вариант.

and (min-width: 361px) and (max-width: 411px) and (min-height: 641px) and (max-height: 731px)

2 вариант. Писать наоборот , т.е. большие экраны вверху, а мыленькие внизу.