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

Question

[Wizlake]

Подскажите, как сделать так, чтобы запрос перебивал предыдущий? Почему не работает моя запись?

Answer 1

[Александр Нестеров]

Ну так 1094 больше и 280 и 768. Соответственно срабатывают оба запроса.
Для маленьких экранов нужно через min-... and max-... задавать

Comments

[Wizlake]

Дело в том, что они не срабатывают, а срабатывает только 280

[Александр Нестеров]

Wizlake, для найменьшего стоит использовать только max-width

Как, к примеру, в моем каркасе

@media (max-width:640px) {


}
@media (min-width:640px) and (max-width:767px) {


}
@media (min-width: 768px) and (max-width: 991px) {


}
@media (min-width: 991px) and (max-width: 1199px) {

}

@media (min-width: 1200px) {


}

Answer 2

[Legal Adviser]

В файле стилей идите от большего к меньшему. А то получается что программа читает сверху вниз и цепляет самый первый наиболее подходящий по размеру. Если я не прав - поправьте меня.