CSS stands for CASCADING STYLE SHEETS which means you should always have your main stylesheet at the top and then secondary style sheets below it. The more certain you want to use the CSS in a file over the others the further down/after the other CSS files it should be.
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
If rules in the secondary match the rules in the primary then because the secondary.css file cascades after the primary.css then it takes precedence. The same with the tertiary.css file and it's rules, it will supersede the rules of the secondary.css file.
Now apply your problem...
Take all the main CSS files and then add the screen-specific CSS files...
<head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link href="/static/mobile.css" media="(max-width: 500px)" rel="stylesheet" type="text/css" />
<link href="/static/main.css" media="(min-width: 500px)" rel="stylesheet" type="text/css" />
</head>
Also try to keep your HTML attributes alphabetical, if you advance far along enough you'll find small tidbits like that will save you a lot of hassle and stick to double-quotes for element attributes.
That of course answers the question though what you really should be doing is minimizing your HTTP requests if you're going to have an HTTP request for a CSS file that is. Regardless within the CSS itself is where you should use media queries.
main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
main {margin: 4px;}
section {border-width: 2px;}
}
Always test your code on the highest resolutions first; I ignore the "mobile first" mentality for good reason: I understand how CSS is supposed be to written. Your media queries should be towards the bottom to adjust for the tablet and (mobile) phone views of the same website. Consider the following code:
CSS
div {border: #000 solid 2px; float: left; width: 96px;}
HTML
<section>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
</section>
...as you resize your browser the div elements in this example would simply start being pushed down to the second row and you resized your browser window to be smaller. A tablet and mobile device are just really reduced window sizes. I highly recommend using the Resize tool on Chris Pederick's Web Developer Toolbar.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
