CSS3: помогите разобраться с @media screen and

Question

[Lici]

Помогите разобраться со всеми этими фишками CSS3. В частности с приоритетами и что на что влияет.

Итак, если я запилил такой файл style.css:

просто_свойства

@media screen and (min-width: 300px) {
свойства_300
}

@media screen and (min-width: 800px) {
свойства_800
}

@media print {
свойства_принт
}

То у меня какбы задаются изначально для всех просто_свойства, НО если вдруг оказывается, что у нас минимальная ширина устройства более 300px то учитываются еще и свойства_300, причем если одинаковым переменным присваиваются разные значения, то приоритет за свойства_300 потому, что оно написано ниже (больше № строки).

А если вдруг оказывается, что у нас устройство имеет более 800px в ширину своего экрана, то «раскоментируюся», «появятся» еще и свойства_800 и они будут учитываться, так как они идут ниже.

Я все правильно понимаю?

Answer 1

[Руслан]

Указывайте так:

@media screen and (min-width: 320px) and (max-width:480px) {
}

Comments

[Павел Мышкин]

Зачем так? Для подхода mobile-first так указывать не нужно. Только для узкоспецифичных случаев. Тут просто надо чуть логику перестроить.

[Илья Панков]

Павел Мышкин: Не факт, что у нас mobile-first

Answer 2

[Сергей Протько]

Вы просто переопределяете значения. Тобиш любое присвоение значений переписывает предыдущее (а вообще у всех свойств есть значение по умолчанию). Тобиш если селекторы у вас в разных секциях media разные, то последнее примененное значение и будет у этого свойства. Тут все просто.

А вот веселее с приоритетами селекторов.

Comments

[Lici]

А раздел

@media screen and (min-width: 300px) {
свойства_300
}

отвечает за свойства для устройств БОЛЬШЕ 300 или МЕНЬШЕ?

[Алексей Вахитов]

min-width — начиная от
max-width — заканчивая