-1

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

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

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

将 MQ 作为片段分散在 css 文件周围，由于每个片段的复制 @media 代码，会导致更大的初始 css 文件下载。但是如果它使浏览器渲染得更快......

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

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

额外细节 ...

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

4

1 回答 1

0

好吧，我不确定，因为没有详尽地测试过，但是，例如 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 文件将比媒体查询范围内的不同文件更好（用于维护和缓存）。

希望这可以帮助

于 2014-12-21T04:47:09.020 回答