在HTML中包含媒体查询的首选方法是什么？

Question

我想知道在HTML中包含CSS样式表的首选方法是什么，并考虑到响应式网页设计。据我所知，有两种不同的方法 - 使用一个包含许多媒体查询的CSS文件，或者拥有多个单独的CSS文件，根据media的{​​{1}}属性调用它们} 标签。

例如，（在CSS文件中）：

<link>

或（在HTML文件中）：

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

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

Answer 1

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