CSS Media Query for print, mobile, and desktop

2
votes

I have had a look around but need a more concise answer to this question.

I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:

  1. CSS resets (everything to use)
  2. The normal desktop 'screen'. (only desktop computers)
  3. Printing 'print' (only printing)
  4. The iPhone/handheld (only handheld)
  5. IE6 stylesheet (only IE6)

So my question is: Am I right to think the right way to control this would be..

  • set the media="all" for the resets.css
  • set the media="screen" for the desktop.css
  • use conditional comments 'here' for legacy browsers.
  • set the media="print" for printing.css
  • use css3 media queries such as : @media only screen and (min-device-width: 320px) and (max-device-width: 480px){ }

has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?

1
htmlcssmedia-queries

1 Answers

3
votes

It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:

http://stuffandnonsense.co.uk/projects/320andup/

You can learn a lot just by looking at how these guys developed their boilerplate.

And, to see how different media queries react on resize or orientation change, try the demo on this page:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

You can adjust the media query attributes to get a feel for how they affect a page.