在 HTML 中包含媒体查询的首选方式是什么？ [关闭]答案

【问题标题】：What is the preferred way of including media queries in HTML? [closed]在 HTML 中包含媒体查询的首选方式是什么？ [关闭]
【发布时间】：2017-03-08 01:28:47
【问题描述】：

我想知道在考虑到响应式网页设计的情况下，在 HTML 中包含 CSS 样式表的首选方式是什么。据我所知，有两种不同的方法——要么使用一个包含许多媒体查询的 CSS 文件，要么拥有多个单独的 CSS 文件，根据 <link> 标签的 media 属性调用它们。

例如，任一（在 CSS 文件中）：

@media screen and (max-width: 768px){
    ...
    ...
}

或（在 HTML 文件中）：

<link rel="stylesheet" media="screen and (max-width:768px)" href="style768.css" />

在什么情况下您会使用一个文件而不是多个文件，反之亦然？我想没有一种“正确”的方法可以做到这一点，但是这两种方法的优缺点是什么？

【问题讨论】：

我更喜欢使用一个样式表，因为我宁愿浏览器请求 1 个资源而不是多个资源，尤其是当不需要多个时。此外，您甚至可以从主 CSS 中导入其他工作表。
所以我问了一些我在互联网上找不到太多信息的东西的利弊，你认为它是基于意见的。酷...下次我会使用Quora ffs
似乎有很多人将其标记为意见，但即便如此，也无需为此感到不安。本网站面向问题和答案，而不是问题和讨论。老实说，因为它被标记为意见并且因为你找不到太多关于它的信息，这可能意味着你所问的问题确实没有明确的答案。根据经验，我从未见过有人有单独的媒体查询样式表，他们也将它们包含在他们的主表中。

标签： html css responsive-design media-queries

【解决方案1】：

我认为这是一个意见问题。只使用一个文件的一大优点是它只是一个网络请求。但是通过将媒体查询拆分为多个文件并在链接时使用媒体属性，浏览器代理可以确定要加载哪个文件，而不是加载所有文件。在前一种情况下，只有 1 个请求，但加载了更多代码，在后一种情况下，加载的代码较少，但有 2 个请求。您可以根据要包含多少媒体特定样式来更详细地确定何时使用哪个，但我个人更喜欢将其捆绑到一个文件中，尤其是在使用带有 Webpack 或 Gulp 等工具的工作流程时。

【讨论】：