哪种媒体查询方法更有效？

Question

我有一个网站，并为此创建了一个移动主题。基本上，我的CSS文件目前分为三个部分：1）常规样式； 2）台式机/笔记本电脑特定的样式； 3）移动设备特定的样式。

所有规则都在一个CSS文件中，但是使用媒体查询来应用不同的块，如下所示：

@media screen and (max-width:1149px) {
     /*Rules here*/
}

这很好，但是它意味着CSS文件实际上比需要的大。改为使用HTML级别的媒体查询会更有效，例如：

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

我的假设是浏览器将仅加载相关的CSS文件，因此可以节省数据并加快加载过程。但是同时，它会为另一个文件创建另一个网络请求，这可能会降低性能。