CSS - 一个文件中的所有媒体查询？或加载单独的 CSS 文件？ [关闭]答案

【问题标题】：CSS - all media-querys in one file? or load separated CSS-files? [closed]CSS - 一个文件中的所有媒体查询？或加载单独的 CSS 文件？ [关闭]
【发布时间】：2016-11-14 11:00:55
【问题描述】：

什么是更好的解决方案：

1) 为所有支持的分辨率制作一个包含所有媒体查询的 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）中有更多请求，但这真的那么重要吗？

【问题讨论】：

你相信SASS吗？
每个开发人员可能对此有不同的看法，当然也取决于场景。我认为没有“正确”的答案......
应该吗？ .. 我的意思是，CSS 就像地球上最简单的东西.. 所以当有人告诉我他让最简单的东西“更简单”时，我就忍不住想，那家伙有什么问题:)跨度>
Offtopic：如果您使用 HTML5，则不再需要`type="text/css"`。更清晰的代码 IMO :)
在开发中，通常使用多个 css 文件来维护可维护性。像gulpjs.com 这样的工具可以将它们编译成一个文件，一个普通文件和一个最小化文件，而您可以在单独的文件中继续开发。

标签： javascript php html css media-queries

【解决方案1】：

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

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

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

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

【讨论】：

好吧，既然浏览器变得更聪明了，它们只会加载与媒体查询匹配的 CSS，这将是一个请求......并且最好不要下载不必要的内容

【解决方案2】：

你必须找到一个艰难的平衡。一方面，您希望尽可能减少请求，因为 HTTP1 不允许在一个请求中使用多个资源，而且 HTTP2 也没有现在那么普遍。

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

如果您有一个大文件，例如 500kb+，那么额外的请求可能是值得的（而且，当您正确使用缓存时，每个缓存周期只需下载一次）。尽量减少文件的数量，例如不要为可能三个文件（除非你有充分的理由不这样做）。

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

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

【讨论】：

谢谢 :) .. 文件大小和带宽的优点！
投反对票的人，请解释一下，而不是只投反对票，以便我改进答案。
很好的答案.. 谢谢:)