Question

I’m trying to wrap my mind around css3’s varying styles for different screen widths to make my site more flexible.

I would basically like to have 3 different styles, all in the same style sheet.

1. For mobile devices with screen sizes that max at 480px(?)
2. For average screen size ie 1200px wide
3. For internet pimps 1900px wide and beyond

I imagine it is done like so:

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

Am I understanding this correctly? It seems this logic to me performs the opposite of how it should. Ie when I’m at 1900px wide its loading the mobile device styles and vice versa.

In addition to this question, does the order of these @media controls matter? ie putting mobile device styles before large screen styles or vice versa?

Answer 1

You’re suggested code looks ok to me.

You might consider adding in a px of space to avoid any problems. Something like

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

Also, have a look at this http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/