最好将其拆分为单独的文件，并使其类似于以下内容：
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
还是应该将它们保存在一个CSS文件中？
更新：我只是想补充一点，我主要关心的是跨浏览器/设备页面打开/渲染速度快，开发难度大。
#1 楼
我认为这实际上取决于您发现最容易开发的内容以及可以帮助您保持整洁的样式表的内容。我能想到的唯一真正的缺点是，如果元素的属性出现在所有样式表中，则必须更新5个单独的文件来更改它（而不是并排显示）一侧）。
根据本文的答案，浏览器将下载所有样式表，无论如何，因此拆分分辨率不是节省带宽的方法：
https：// stackoverflow.com/questions/16657159/当使用媒体查询时，电话加载了非相关事件查询和图像
评论
在您链接的那篇文章中，您知道他所说的“这是CSSOM的局限性”的意思吗？
–心怀不满的山羊
14年7月21日在16:36
CSS对象模型-dev.w3.org/csswg/cssom-我认为这定义了CSS的处理方式，因此我认为他所指的局限性在于没有模型可以更节省带宽地处理此类样式道路。
–RichardB
2014年7月21日在17:30
虽然它不是下载保护程序，但它在某种程度上是可行的。浏览器将匹配的媒体查询链接优先于不匹配的媒体查询链接。匹配的css文件将阻止页面渲染，而不匹配的css文件会被浏览器下载的优先级降低，并且根本不会阻止页面渲染。同样，一旦拆分，您可以使用js进行有条件的下载（如果要保存并绑定）。
– dalore
2015年7月30日14:47
#2 楼
这在某种程度上取决于您要实现的目标：您是要加快页面加载速度还是要使开发更轻松？如果您针对后者，则可以使用多张纸，但这全都是偏爱的问题。我发现使用一个大文件是最容易的，因为这样可以概述所有声明的样式。
如果您想要更快的加载页面而不是最好的选择，那就是减少加载量的请求，因为请求开销很大。此外，您可以自己保留开发版本并在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
– dalore
15年7月30日在14:50
#3 楼
最好只有一个CSS文件，然后将其缩小并gzip。假设您之前有30KB的空间，那么经过压缩（去除空格）和gzip后，文件大小可能会减小到大约5KB。拆分可能会为您带来更多的加速，但是只有在一些条件。
您必须确保每次仅加载一个样式表-否则，您将需要两个或多个HTTP请求，这些请求本身会产生开销，至少会部分抵消较小文件大小带来的收益。为此，仅拆分样式表并插入具有不同媒体属性的多个
<link>标签是不够的，浏览器似乎无论媒体查询如何都加载所有<link> ed样式表（感谢@cimmanon提供此信息，不知道样式表之间共享的CSS规则的数量必须少-否则，多个样式表中的每个样式表都需要包含所有通用规则，因此几乎具有原始样式的大小。
您使用CSS预处理器（或类似的预处理器），因此可以在5个样式表中使用相同的代码段。
也：不要过早优化。仅在遇到性能问题时才这样做。
评论
值得注意的是，如果对所有媒体查询特定文件都使用标记，则将无法阻止浏览器下载它们。您将不得不在服务器端使用浏览器嗅探或使用JavaScript来检查视口尺寸并注入适当的样式表。这些都不是很好的选择。
–cimmanon
14年7月21日在16:28
我有点惊讶，但是您是对的-我认为将媒体属性添加到-标签会阻止加载不匹配的样式表。为什么浏览器会这样做？当然，这是不拆分样式表的唯一最重要的原因。
–Jost
2014年7月21日在18:07
他们这样做是因为您的屏幕可以更改，如果您使用的是移动电话，并且将其从纵向旋转到横向，突然之间您的屏幕宽度会有所不同。或者，您可以在桌面上调整浏览器窗口的大小，或者如果您具有多显示器设置，则将窗口拖动到另一个屏幕上。如果浏览器未提前下载所有CSS资产，则在上述任何一种情况发生时，以及在重新呈现页面时都会出现延迟
– MrCarrot
15年7月4日在18:42
最好将它们分开。如今，大多数浏览器都是spdy浏览器（您的站点使用https和spdy应该是正确的），并且使用spdy将多个连接多路复用到同一连接中，因此文件的数量现在不再重要。此外，浏览器还会将优先级较低的不匹配媒体查询CSS文件下载到文件中，更重要的是不会阻塞页面渲染。
– dalore
15年7月30日在14:49
#4 楼
您应该根据媒体查询拆分CSS文件，因为CSS文件受到渲染阻止。当浏览器构建DOM时，它必须首先等待并加载所有CSS文件。如果某些CSS文件仅根据某些媒体查询加载，则可以减少页面加载时间。
这也用于向JavaScript脚本标签添加异步；例如：
<script src='myfile.js' async></script>。DOM不必等待JS文件加载。仅当DOM的构造在onload不需要任何JavaScript时，才添加异步。
评论
我听说它声称，如果您确实不希望异步脚本潜在地延迟渲染，请在window.onload事件上执行它们，而不要使用异步。
–凯文·惠勒
2015年12月30日，0：57
#5 楼
我倾向于这样说。对于生产，请始终将它们保存在一个文件中；原因是它对浏览器更有效，这是从开发到生产时的主要兴趣所在（IMO）。
Develop是另一种鱼。我倾向于将媒体查询拆分为任意元素，例如：
.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
.foo { // .. some differentcss }
}
一般来说，如果我要更改元素，我都不会必须到处寻找CSS（尽管您可以使用grep之类的东西）。
但是，我要说的一件事是，值得考虑站点本身，发展历程。如果您真的认为将它们分成基于屏幕大小的文件是值得的，那就试试吧。制作该站点的副本（如果可能），并试用该副本-如果使副本变得更容易，请使用该副本。您无需遵循一种开发所有网站的千篇一律的范例。
#6 楼
简单：只需使用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
如果需要，可以使用多个样式表和称呼每个特定的尺寸。
#7 楼
我宁愿看看Bootstrap。它是包含所有CSS的1个CSS文件。它可以在几乎99％的浏览器上运行，并且响应速度非常快。单击实时演示放大（
Ctrl + =放大，Ctrl - =缩小，Ctrl 0 =正常）或在您的手机上打开它看看它如何渲染。评论
他已经编写了30kb的CSS，如何切换到引导程序可能会有好处？
–史蒂夫·桑德斯（Steve Sanders）
2014年7月21日在14:42
这样说，是的，我同意30kb的CSS是重做的任务。我只是将其复制并粘贴到不同的样式表中，所有这些都取决于它的结构，您可以复制并重命名css文件并删除所有不必要的部分。
– Regardt Ogies Myburgh
2014年7月21日在14:50
评论
是否存在grunt / webpack /任何插件来获取单个CSS文件并将其拆分为多个文件，并通过媒体查询将其分开？那么可以说，您可以通过一个整体文件来简化开发过程，并可以对单独文件进行速度优化。