CSS - 所有 media-querys 都在一个文件中?或负载分离 CSS-files?

CSS - all media-querys in one file? or load separated CSS-files?

什么是更好的解决方案:

1) 为所有支持的分辨率

制作一个 CSS-File 全部 Media-Querys
<link rel="stylesheet" href="mobile.css" type="text/css" media="all" />

2) 为每个支持的分辨率制作一个 CSS-File 并将它们加载到 header

<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) 有更多请求,但这真的那么重要吗?

由于 HTTP 1.1 的性质,请求越少越好(为每个单独的请求建立新的 TCP 连接需要时间)。

我强烈建议在整个应用程序中尽可能少地使用请求。但是,对于 CSS 可以使用 SASS or LESS to compile several files into one single CSS-file. The same can be achieved in numerous ways with JavaScript, eg with online tools.

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

还值得注意的是,SPDY and HTTP 2.0 正准备在大多数主要浏览器上可用。

你必须找到一个艰难的平衡点。一方面,您希望将请求保持在尽可能低的水平,因为 HTTP1 不允许在一个请求中使用多个资源,而 HTTP2 也不像将来那么普遍。

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

如果您有一个大文件,比如 500kb+,那么额外的请求可能是值得的(而且,当您正确使用缓存时,每个缓存周期只会下载一次)。尽量减少文件数量,例如不要为 <320、<680、<768、<1024 等创建一个文件。一分为二,可能 三个文件(除非你有充分的理由不这样做)。

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

并且不要忘记可维护性。你必须维护代码。如果您将所有内容拆分成文件,您并没有让事情变得更轻松。如果您实施的解决方案很少,您可能需要重新考虑,因为困难的代码在较长的 运行.

中会产生更糟糕的效果。