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可以通过多种方式实现同​​样的目的,例如使用在线工具.

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

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

如果你想阅读更多内容,我就此事合着了一篇论文.

Answer 2

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

另一方面，还有解析速度。在移动设备上，文件大小很重要。与台式机相比，解析（=将 css 转换为实际结果）需要更长的时间。

如果您有一个大文件，例如 500kb 以上，则额外的请求可能是值得的（并且，当您正确使用缓存时，每个缓存周期仅下载一次）。请尽量减少文件数量，例如，不要为 <320、<680、<768、<1024 等创建一个文件。分成两个，也许三个文件（除非您有充分的理由这样做）。

你也可以扭转它。一些开发人员喜欢首先构建移动设备，然后扩展到桌面尺寸。当你变小时，你不用改变 css，而是使用screen and (min-width:1024px). 然后将您的移动 CSS 保留在主样式表中，并为浏览器版本提供 1024px+ 文件，该文件通常功能更强大，因此影响较小。

并且不要忘记可维护性。您必须维护代码。如果你把所有的东西都分成文件，你并不会让事情变得更容易。如果您实现的解决方案很少，您可能需要重新考虑，因为从长远来看，困难的代码会产生更糟糕的效果。