Использование стилей CSS3 для различной ширины экрана

Question

Я пытаюсь сосредоточиться на различных стилях css3 для разной ширины экрана, чтобы сделать мой сайт более гибким.

Мне бы хотелось иметь 3 разных стиля, все в одной таблице стилей.

1. Для мобильных устройств с размерами экрана не более 480px (?)
2. Для среднего размера экрана, например, шириной 1200 пикселей
3. Для интернет-сутенеров шириной 1900 пикселей и более

Я полагаю, это сделано так:

@media all and (max-width: 480px){
// my styles for iphones and androids
}

@media all and (min-width: 480px) and (max-width: 1900px) {
// my styles for sites anywhere between mobile and large resolutions
}

@media all and (min-width: 1900px){
// my styles for all the bosses out there
}

Правильно ли я понимаю?Мне кажется, что эта логика выполняет противоположное тому, как должно.Т.е. когда я шириной 1900px загружаю стили мобильных устройств и наоборот.

В дополнение к этому вопросу, имеет ли значение порядок этих элементов управления @media?т.е. ставить стили мобильных устройств перед большими стилями экрана или наоборот?

Answer 1

Вам предлагается, чтобы код выглядел нормально для меня.

Вы можете рассмотреть вопрос о добавлении пробела px, чтобы избежать каких-либо проблем.Что-то вроде

@media all and (max-width: 480px){
// my styles for iphones and androids
}

//make this min-width start at 481px, etc. 
@media all and (min-width: 481px) and (max-width: 1900px) {
// my styles for sites anywhere between mobile and large resolutions
}

Также посмотрите на это http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/