Since there are many ways to implement CSS3 Media Queries into a website, I would like to know which one is recommended by more experienced web designers. I can think of a couple:
1. All in one Stylesheet
There is a default style which applies to all screen widths, and media queries that apply only to lower screen widths and overwrite the default, all in one file. For example:
HTML
<link rel="stylesheet" href="main.css">
main.css
article
{
width: 1000px;
}
@media only screen and (max-width: 1000px)
{
article
{
width: 700px;
}
}
(please keep in mind that this is just an example)
Pros:
- Default style applies to older browsers
- Only one HTTP request required
Cons:
- Gets messy with a lot of code
- Some browsers will have to download code that they won't apply
2. Separate Stylesheets
There are separate stylesheets containing full code tailored for each screen width. Browsers only load the one that applies. For example:
HTML
<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">
large-screen.css
article
{
width: 1000px;
}
small-screen.css
article
{
width: 700px;
}
Pros:
- Neat and organized
- Only one HTTP request required
- Browsers only load what they need
Cons:
- (This is why I'm hesitant to use this:) When one makes a change that applies to all screen widths, the change has to be copied and pasted to the appropriate spots in all of the stylesheets.
3. Separate Stylesheets, one Global Stylesheet
The same as #1, but the global style and the media queries are in separate stylesheets. For example:
HTML
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">
main.css
article
{
width: 1000px;
}
small-screen.css
article
{
width: 700px;
}
Pros:
- Also neat and managable
- Does not have problem of #2 when making global changes
- Global style applies to older browsers
Cons:
- Smaller screen-widths require 2 HTTP requests
That's all I can think of. How should media queries be managed?
Thanks for any responses.