Utilisation des styles de css3 pour varier les largeurs d'écran

Question

J'essaie de comprendre les différents styles de css3 pour différentes largeurs d'écran afin de rendre mon site plus flexible.

Je voudrais fondamentalement avoir 3 styles différents, tous dans la même feuille de style.

1. Pour les appareils mobiles avec écran tailles max à 480px (?)
2. Pour la taille de l'écran moyen par exemple 1200px de large
3. Pour les proxénètes Internet 1900px de large et au-delà

J'imagine qu'il est fait comme si:

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

Je comprends bien cela? Il me semble que cette logique fait le contraire de ce qu'elle devrait être. C'est à dire quand je suis à 1900px de large son chargement des styles de périphériques mobiles et vice versa.

En plus de cette question, est-ce que l'ordre de ces contrôles @media est important? c'est-à-dire mettre les styles d'appareils mobiles avant les grands styles d'écran ou vice versa?

Answer 1

Vous me suggérez que le code me semble correct. Vous pouvez ajouter un px d'espace pour éviter tout problème. Quelque chose comme

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

De plus, jetez un oeil à ce http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/