Question

是否优先选择定义CSS媒体查询的位置？即我应该从我的html中调用它们：

<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" />
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" />

或者我应该维护一个CSS文件并在那里定义媒体查询？

Answer 1

无论什么最适合你，真的。

我个人更喜欢在我的主CSS文件中定义它们，以及它们影响的规则。例如：

#someElement {font-size:24pt;}
@media all and (min-width:350px) {
    #someElement {font-size:12pt}
}

这使他们紧密相连，所以我不会忘记他们。它还意味着更少的HTTP请求。

Answer 2

我个人会在一个文件中找到所有内容。您可以（或应该）使用css预处理器（如less或sass）来管理代码的大小和结构。这样，您可以开发多个文件，并在将它们上传到您的网络服务器之前将它们组合/最小化。

使用单个文件的主要原因是速度。通常额外的请求需要花费更长的时间，然后再下载一些额外的千字节。这也是像雅虎和谷歌这样的“重要人物”所建议的......

CSS媒体查询 - 它们应该在哪里定义？

2 个答案: