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.
无论当前屏幕大小如何，媒体查询都不会停止对文件的请求：
你必须找到一个艰难的平衡点。一方面，您希望将请求保持在尽可能低的水平，因为 HTTP1 不允许在一个请求中使用多个资源，而 HTTP2 也不像将来那么普遍。
另一方面，还有解析速度。在移动设备上，文件大小很重要。与台式计算机相比，解析（=将您的 css 转换为实际结果）需要更长的时间。
如果您有一个大文件，比如 500kb+，那么额外的请求可能是值得的（而且，当您正确使用缓存时，每个缓存周期只会下载一次）。尽量减少文件数量，例如不要为 <320、<680、<768、<1024 等创建一个文件。一分为二，可能 三个文件（除非你有充分的理由不这样做）。
你也可以反过来。一些开发人员喜欢先构建移动设备，然后再扩展到桌面大小。当你变小时，你不用改变 css，而是使用 screen and (min-width:1024px)。然后将您的移动 css 保留在主样式表中，并为浏览器版本提供 1024px+ 文件，该文件通常功能更强大，因此影响较小。
并且不要忘记可维护性。你必须维护代码。如果您将所有内容拆分成文件，您并没有让事情变得更轻松。如果您实施的解决方案很少，您可能需要重新考虑，因为困难的代码在较长的 运行.
中会产生更糟糕的效果。
什么是更好的解决方案：
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.
无论当前屏幕大小如何，媒体查询都不会停止对文件的请求：
你必须找到一个艰难的平衡点。一方面，您希望将请求保持在尽可能低的水平，因为 HTTP1 不允许在一个请求中使用多个资源，而 HTTP2 也不像将来那么普遍。
另一方面，还有解析速度。在移动设备上，文件大小很重要。与台式计算机相比，解析（=将您的 css 转换为实际结果）需要更长的时间。
如果您有一个大文件，比如 500kb+，那么额外的请求可能是值得的（而且，当您正确使用缓存时，每个缓存周期只会下载一次）。尽量减少文件数量，例如不要为 <320、<680、<768、<1024 等创建一个文件。一分为二，可能 三个文件（除非你有充分的理由不这样做）。
你也可以反过来。一些开发人员喜欢先构建移动设备，然后再扩展到桌面大小。当你变小时，你不用改变 css，而是使用 screen and (min-width:1024px)。然后将您的移动 css 保留在主样式表中，并为浏览器版本提供 1024px+ 文件，该文件通常功能更强大，因此影响较小。
并且不要忘记可维护性。你必须维护代码。如果您将所有内容拆分成文件，您并没有让事情变得更轻松。如果您实施的解决方案很少，您可能需要重新考虑，因为困难的代码在较长的 运行.
中会产生更糟糕的效果。