Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using css3's styles for varying screen widths

Using css3's styles for varying screen widths

Problem

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?

Problem courtesy of: willdanceforfun

Solution

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/

Solution courtesy of: Jason Gennaro

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using css3's styles for varying screen widths

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×