我正在一个响应式设计网站上提供各种屏幕尺寸的内容。我有针对5个不同“步骤”的媒体查询，而CSS文件约为30 Kb。
最好将其拆分为单独的文件，并使它们类似于以下内容：
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />还是应该将它们保存在一个CSS文件中？
更新：我只是想补充一点，我主要关心的是跨浏览器/设备页面的打开/呈现速度，而不是易于开发。
Answers:
我认为这实际上取决于您发现最容易开发的内容以及可以帮助您保持整洁的样式表的内容。
在拆分时，我唯一想到的真正缺点是，如果元素的属性出现在所有样式表中，则必须更新5个单独的文件才能进行更改（而不是并排出现在一个位置）。
根据帖子的答案，浏览器将下载所有样式表，无论如何，因此拆分分辨率不是节省带宽的方法：https : //stackoverflow.com/questions/16657159/when-using-media-queries-does-a电话加载非相关查询和图像
这在某种程度上取决于您要实现的目标：是要使页面加载速度更快还是要使开发更轻松？
如果您针对后者，则可以使用多个工作表，但这仅是一个优先事项。我发现使用一个大文件最容易，因为这使您可以大致了解已声明的所有样式。
如果您想要一个更快的加载页面，而不是最好的选择，那就是最大程度地减少请求数量，因为请求开销很大。此外，您可以自己保留开发版本并在Web上使用最少的CSS（我发现YUI是一个好方法：http : //www.refresh-sf.com/yui/）。
此外，我会尝试优化CSS本身。您可以尝试合并非常相似的类，例如：
.bold-and-italic { font-weight: bold; text-style: italic; }可以转换为：
.bold { font-weight: bold; }
.italic { text-style: italic; }唯一的事情是您必须将html从略微更改<span class="bold-and-italic">foo bar</span>为<span class="bold italic">foo bar</span>
我可以强烈建议您看一下Bootstrap（http://getbootstrap.com），这些家伙在将类划分为多个“子类”方面做得很好。
我希望这有帮助。
.important
最好只有一个CSS文件，但要缩小并gzip文件。假设您之前有30KB的空间，那么经过压缩（去除空格）和gzip后，您可能会将文件大小减小到大约5KB。
拆分可能会为您带来更多的加速，但仅限于某些情况。
<link>不同的媒体属性标签都有效，浏览器似乎加载所有<link>编辑样式，无论媒体查询（感谢@cimmanon这个信息，不知道） 。另外：不要过早优化。仅在遇到性能问题时才这样做。
<link rel="stylesheet" />所有媒体查询特定文件中都使用标记，则将无法阻止浏览器下载它们。您将不得不在服务器端使用浏览器嗅探或使用JavaScript来检查视口尺寸并注入适当的样式表。这些都不是很好的选择。
<link>-tag会阻止加载不匹配的样式表。为什么浏览器会这样做？当然，这是不拆分样式表的唯一最重要的原因。
您应该根据媒体查询拆分CSS文件，因为CSS文件受到渲染阻止。
当浏览器构建DOM时，它必须首先等待并加载所有CSS文件。如果某些CSS文件仅基于某些媒体查询来加载，则可以减少页面加载时间。
这也适用于向JavaScript脚本标记添加异步；例如：<script src='myfile.js' async></script>。
DOM不必等待JS文件加载。仅当DOM的构造在onload上不需要任何JavaScript时，才添加异步。
我倾向于这样说。
对于生产，请始终将它们保存在一个文件中；原因是它对浏览器更有效，并且这是从开发到生产时的首要利益（IMO）。
发展是另一回事。我倾向于将媒体查询拆分为任意元素，例如：
.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
.foo { // .. some differentcss }
}通常，如果我要更改元素，我不需要到处寻找CSS（尽管您可以使用grep之类的东西...）。
但是，我要说的一件事是，值得考虑站点本身，开发过程等等。如果您真的认为将它们分成基于屏幕大小的文件是值得的，那就试试吧。制作该站点的副本（如果可能），并尝试使用该副本-如果使副本更容易，请使用该副本。您无需遵循一种开发所有网站的千篇一律的范例。
简单：使用1个样式表，并向其中添加注释，以使查找和更改CSS样式更加容易，例如：
//sheet 1 (mobile device 800 px)
code
//sheet 2 (mobile device 768 px)
code
//sheet 3 (mobile device 480 px)
code
//sheet 4 (desktop size 1024 px)
code如果您愿意，可以使用多个样式表，并为每个特定大小调用它们。
我宁愿看看Bootstrap。它是包含所有CSS的1个CSS文件。它可以在几乎99％的浏览器上运行，并且响应速度非常快。
单击实时演示进行放大（Ctrl +=放大，Ctrl -=缩小，Ctrl 0=正常）或在您的手机上打开以查看其呈现方式。