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