Używanie stylów css3 do zmiany szerokości ekranu - css, css3

Próbuję zawrzeć mój umysł wokół różnych stylów css3 dla różnych szerokości ekranu, aby moja strona była bardziej elastyczna.

Zasadniczo chciałbym mieć 3 różne style, wszystkie w tym samym arkuszu stylów.

1. Dla urządzeń mobilnych o rozmiarach ekranu do 480 pikseli (?)
2. Dla przeciętnego ekranu o szerokości 1200 pikseli
3. Dla internetowych alfonsów o szerokości 1900 pikseli i więcej

Wyobrażam sobie, że robi się tak:

@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
}

Czy rozumiem to poprawnie? Wydaje się, że ta logika jest dla mnie przeciwieństwem tego, jak powinna. Tj. Kiedy mam 1900px szerokości ładowanie stylów urządzeń mobilnych i odwrotnie.

Oprócz tego pytania, czy kolejność tych @media kontroli ma znaczenie? tj. umieszczanie stylów urządzeń mobilnych przed dużymi stylami ekranów lub odwrotnie?

Odpowiedzi:

Sugerujesz, że kod wygląda dla mnie dobrze.

Możesz rozważyć dodanie px przestrzeni, aby uniknąć problemów. Coś jak

@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
}

Spójrz też na to http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/