CSS 性能与媒体查询放置

Question

我正在第二次尝试为我的企业设计一个响应式网站。我想知道在考虑浏览器渲染性能的情况下组织我的 css 文件的最佳方法。

只有一个 css 文件，包括所有媒体查询（有三个中断：全尺寸、平板垂直、手机）。目前我所有的媒体查询都在文件的末尾（更容易找到我目前正在微调的内容）。我曾考虑为每个中断创建一个完整的 css，然后根据媒体查询单独调用它们，但最近阅读测试表明浏览器仍然下载所有不同的 css 文件，但只使用适当的文件，这意味着更多的下载没有任何好处。

一旦一切准备就绪，最好将各种 M-Q 移动到它们的“默认”css 对应物之后（即垂直平板正文字体大小，紧跟在“默认”正文字体大小之后）。或者浏览器在开始渲染页面之前是否通读了整个 CSS 文件。

将 M-Q 作为 sn-ps 分散在 css 文件周围，由于每个 sn-p 复制了 @media 代码，因此可以下载更大的初始 css 文件。但是如果它使浏览器渲染得更快......

让我想知道的方面是基本字体大小，因为我将针对平板电脑、手机和台式机稍微修改它以适应观看距离。由于所有字体大小、内边距和边距都基于 rem 单位，因此更改基本大小会影响很多项目。

那么从纯粹的性能角度（下载和浏览器渲染）来看，一种方法比其他方法更可取吗？

更多细节...

我想也许我应该问的是，浏览器如何使用 css 文件。它是否会读取整个 css 文件然后开始渲染？还是从第一行css开始渲染，然后下一行再下一行？

Answer 1

好吧，我不确定，因为没有详尽地测试过，但是，例如 w3.org 网站正在使用“通过媒体查询加载”技术。

<link rel="stylesheet" href="/2008/site/css/minimum" type="text/css"
    media="handheld, all" />
<style type="text/css"
    media="print, screen and (min-width: 481px)">
/*<![CDATA[*/
@import url("/2008/site/css/advanced");
/*]]>*/
</style>
<link href="/2008/site/css/minimum" rel="stylesheet" type="text/css"
    media="handheld, only screen and (max-device-width: 480px)" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/2008/site/css/print" type="text/css"
    media="print" />

为了让浏览器按媒体类型加载资源。

这样，一开始就不必全部加载。以 media="print" 为例。打印样式表除了打印外没有加载。

在您的问题中，您提到了 1 个单个 .css 文件，因此，您可能被卡住了，但是如果您可以将文件拆分为 3 个不同的文件，那么该示例会有所帮助。相反，如果您使用“调整大小”查询，如果用户最小化或缩小视口，浏览器可能必须下载下一个 css 文件。

此外，如果您的设计不会发生太大变化，或者生成的文件非常小，是的，1 个 .css 文件将比媒体查询范围内的不同文件更好（用于维护和缓存）。

希望对你有帮助