css - Best way to use Media Queries for Mobile Designs

Question

I know what media queries are and why they are used, but I'm not sure on how the best way to develop a mobile site with them are.

Example: I have mysite.com that has a style sheet with all the necessary styles (let's say it's a pretty big file). At this point, none of my styles target lower screen resolutions or other devices.

I then decide to make a mobile version of my site. To make it easy, I'll target only iPhone users for now, and if the code detects someone visits my site on an iPhone, they get the mobile version.

My question(s): Where is the best place to include these extra styles, so that a user sees the mobile version? Should I include these styles in the original style sheet, or would it better if I separate them out into their own style sheet?

Say that my site is built entirely with floats, but my mobile version will just show every element stacked on top of each other. How do I show that using media queries? Is it as simple as declaring float:none; or something?

Basically, what I'm trying to ask in the paragraph above is, how do I construct my style sheet so that, for example, the basic colors and maybe link positions or whatever persist in the mobile version as in the desktop version but with differences such as stacking everything on top of each other in the mobile version?

Are the rules in the media query section of a style sheet basically 'over-riding' what you've declared in the non media query sections?

I've found many examples of using media queries, but I can't find one working example of a full site. If I have a mobile.css and main.css linked in the same HTML page, how do they work together to retain some aspects of my site in the mobile version but change others?

Last question: is it possible to have an entirely fixed-width design, but still use media queries? The code will still be able to detect when the browser shrinks or expands past a certain width/height, correct?

Sorry for the long and probably confusing question. I hope you can tell what I'm trying to ask.

Answer 1

There are (at least!) four ways to do this:

1. Normal CSS, with media queries at the bottom (so they override the CSS above)
2. Two (or more) CSS files loaded using media queries on the link element
3. Server side detection that adds different CSS links in the HTML
4. Server side detection then a redirect to m.example.com, or example.com/mobile

If you are talking minor changes (float:none, different font sizes etc) then I'd go for 1. If there are lots and lots of changes to the CSS, I'd use 2 or 3 (3 isn't as good, as you rely on useragents, rather than screen properties). If the HTML and CSS changes, I'd use 4.

For all of this, check your work in Internet Explorer 6 - 8, they may ignore the media queries and use all the CSS, including the mobile bits if you use 1.

Have a look at http://mediaqueri.es/ for some examples of sites using 1 and 2.

Here's another resource that might help: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4