Best way to use Media Queries for Mobile Designs

问题:

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.

回答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

回答2:

I would suggest not fooling around with mobile browser/device detection at all; this is where media queries excel. Think more organically, and instead of having to constantly update your website with new devices and mobile browsers, just use one CSS file, and utilize CSS3's max-width/max-device-width.

Place <meta name="viewport" content="width=device-width"/> in your header, and in your CSS file parse it into a desktop version and a mobile version:

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

回答3:

I would not recommend option 3. Sniffing has been proven a bad choice time and time again. What happens when a device/browser presents wrong information? It's easily hijacked.

Don't do this. Media Queries all the way. It is the supported standard.

回答4:

I would recommend option 3.

User agent sniffing to detect devices is not bad. It has been a constant for creating mobile websites for years now. Using PHP device detection, you have more control of your site on different devices. Not only can you choose what CSS files go to which device you, can also choose what assets/mark-up gets loaded per device category; mobile, tablet, desktop, tv, etc.

With this method, you can make sure mobiles are not receiving desktop assets/styles/markup and vice-versa, even if JavaScript is disabled.