Question

我正在努力为我的业务设计一个响应式网站。我想知道在编写带有浏览器渲染性能的css文件的最佳方法时。

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

一旦一切准备就绪，最好将各种M-Q移动到他们的＆＃34;默认＆＃34;之后。 css对应物（即垂直平板电脑主体字体大小，紧跟在＆＃34;默认＆＃34;正文字体大小）。或者，在开始呈现页面之前，浏览器是否读取整个CSS文件。

将M-Q作为分散在css文件周围的片段，由于每个片段的复制@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”为例。除打印外，不会加载打印样式表。

在你的问题中，你提到了一个单独的.css文件，所以，也许你被困住了，但是如果你可以将文件分成3个不同的文件，那么这个例子会有所帮助。相反的部分是，如果您使用“调整大小”查询，如果用户最小化或减少视口，浏览器可能必须下载下一个css文件。

此外，如果您的设计不会发生太大变化，或者结果文件非常小，是的，1个单独的.css文件将优于由媒体查询确定的不同文件（用于维护和缓存）。

希望这有帮助

CSS性能与媒体查询放置

1 个答案: