在我看来，在link>标记内的HTML文件中定义媒体查询比在外部CSS文件中使用@media only...更好。
您可以非常精确地模块化大量特定文件，具体取决于所针对的设备，并且仅检索您需要的文件。我不能想到一个不使用这种方法的理由，或一个不优越的单一实例。
但是，我还是无法验证这一点。任何人都可以提供任何科学证据/证据来支持或使我的理论无效吗？
由于
答案 0 :(得分：6)
您可以非常精确地模拟大量特定文件，具体取决于所针对的设备，并且只检索您需要的文件。
这（强调部分）是关于通过<link>元素中的媒体查询加载的样式表的一种非常常见的误解。 （你所说的关于文件模块化的内容仍然适用。）
无论应用于<link>元素的媒体查询如何，都将加载所有文件。仅当满足媒体查询时才会加载文件，因为在查看同一页面时，如果某些属性发生更改，则无法保证浏览器不会满足它（甚至不再满足它）。
例如，如果您将移动设备从纵向旋转到横向，它将停止匹配(orientation: portrait)并开始匹配(orientation: landscape)。它需要确保后者中的样式在切换到该格式时可以应用，因此必须事先加载样式。
HTML5 spec for the <link> element未提及media属性应如何确定是否应加载资源。 Media Queries spec没有定义应该如何加载样式表来处理媒体查询，但是它在一个注释中说明了这一点：
用户代理需要（但不是必需）重新评估和重新布局页面以响应用户环境的变化，例如，如果设备从横向模式倾斜到纵向模式。
答案 1 :(得分：0)
更好的选择是使用@import 后跟媒体查询。如果媒体查询不受支持或不适用于浏览器，则不会加载外部 CSS。然而，这意味着带有基于屏幕方向的条件查询的 @import 文件要么在屏幕方向改变时导入文件，要么在方向切换时根本不加载 CSS。