CSS - 一个文件中的所有媒体查询？或加载分离的CSS文件？

Question

什么是更好的解决方案：

1）为所有支持的分辨率制作一个包含所有Media-Querys的CSS文件

<link rel="stylesheet" href="mobile.css" type="text/css" media="all" />

2）为每个支持的分辨率制作一个CSS文件并将其加载到标题

中

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (min-width:240px) and (max-width:639px)" />
<link rel="stylesheet" href="tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />

???

我的意思是，在尝试中2）有更多请求，但这真的那么重要吗？

Answer 1

由于HTTP 1.1的性质，较少的请求总是有利的（为每个需要时间的单独请求建立新的TCP连接）。

我强烈建议您在整个应用程序中使用尽可能少的请求。但是，对于CSS，可以使用SASS或LESS将多个文件编译为一个CSS文件。使用JavaScript可以通过多种方式实现同​​样的目标，例如使用在线tools。

无论当前屏幕大小如何，媒体查询都不会停止文件请求：

值得注意的是，SPDY和HTTP 2.0在大多数主流浏览器上都可用。

如果您希望read more，我已就此事合着了一篇论文。

Answer 2

你必须找到一个困难的平衡。一方面，您希望尽可能低地保留您的请求，因为HTTP1不允许在一个请求中使用多个资源，而HTTP2并不常见。

另一方面，有解析速度。在移动设备上，文件化很重要。与桌面计算机相比，解析（= 将您的CSS转换为实际结果）需要更长的时间。

如果你有一个大文件，比如500kb +，额外的请求可能是值得的（并且，当你正确使用你的缓存时，每个缓存期只需要下载一次）。尽量减少文件数量，例如不要为＆lt; 320，＆lt; 680，＆lt; 768，＆lt; 1024等等制作一个。分成两个，可能三个文件（除非你有充分的理由不这样做）。

您也可以将其转为。一些开发人员喜欢先构建移动设备，然后扩展到桌面大小。当你变小时，不要改变css，而是使用screen and (min-width:1024px)。然后将你的移动css保存在主样式表中，并为浏览器版本提供1024px +文件，这通常更有能力，因此效果会更差。

并且不要忘记可维护性。你必须维护代码。如果您将每个文件分成文件，那么您自己就不会让事情变得更容易。如果您实施的解决方案很少，您可能需要重新考虑，因为从长远来看，困难的代码会产生更糟糕的影响。