1.所有在一个样式表
有一种适用于所有屏幕宽度的默认样式，以及仅适用于较低屏幕宽度并覆盖默认值(仅限一个文件)的媒体查询。例如：
HTML
<link rel="stylesheet" href="main.css">
main.css
article
{
width: 1000px;
}
@media only screen and (max-width: 1000px)
{
article
{
width: 700px;
}
}
(请记住，这只是一个例子)
优点：
>默认样式适用于旧版浏览器
>只需要一个HTTP请求
缺点：
2.单独的样式表
有单独的样式表，包含为每个屏幕宽度定制的完整代码。浏览器只加载应用的浏览器。例如：
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)">
大屏幕
article
{
width: 1000px;
}
small-screen.css
article
{
width: 700px;
}
优点：
>整洁有组织
>只需要一个HTTP请求
>浏览器只加载他们需要的
缺点：
>(这就是为什么我犹豫使用这个:)当一个更改适用于所有的屏幕宽度，更改必须复制并粘贴到所有样式表中的适当位置。
3.单独的样式表，一个全局样式表
与#1相同，但全局样式和媒体查询位于单独的样式表中。例如：
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;
}
优点：
>也整洁，可管理
>进行全局更改时没有#2的问题
>全局样式适用于旧版浏览器
缺点：
>较小的屏幕宽度需要2个HTTP请求
这就是我能想到的。如何管理媒体查询？
感谢任何回应。
解决方法
啊…这可能是一个有点混乱的声明。一个例子是为了…
而不是像：
/*default styles:*/
/*header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
/*header styles*/
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
我建议选项#1，刚实现如此：
/*default header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
}
/*default content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
}
/*default footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
(所有的类都是占位符，我不是很有创意…)
虽然这意味着您将多次执行相同的媒体查询声明(导致更多的代码)，但是它对测试单个模块更加方便，这将有助于您的网站的可维护性越来越大。尝试添加多个真正的样式，更多的标签/类/ id的例子，我给了，或许添加一些空格给他们，你会看到很快看到更快的缩小和更改/追加样式所有屏幕尺寸)在示例的第二部分所示的实现中。
我相信这个答案完全相信来自CSS的可扩展和模块化架构的信息，Jonathan Snook。 (毕竟，像我这样的初学者没有办法能够找出和解释一个像所有的答案自己！)从该书的许多相关部分之一引用，
“…instead of having a single break point,either in a main CSS file or in a seperate media query style sheet,place media queries around the module states.”
虽然，如果通过个人偏好或其他你宁愿不使用这种方法，那么你可以自由地去与任何其他选择你提出 – 毕竟，Snook自己说，他的书“是更多的风格指导比刚性框架“，所以不要觉得这是一个编码标准。 (虽然我觉得应该是XD)
