我知道媒体查询可以在HTML或CSS中声明：
HTML链接：
<link rel="stylesheet" type="text/css" href="foo.css" media="(max-width: 1024px)">CSS：
@media all and (max-width: 1024px) {
...
}我已经阅读了文档，我认为我理解了这两种方法之间的大部分差异。然而，我仍然有以下问题：
1.对于带有媒体查询的HTML链接资源，浏览器是否仅在满足媒体查询条件时下载链接资源？
1.比如说，如果一个CSS文件也有针对1024px以外的更小宽度的媒体查询，就像这样：
body {
padding: 10px;
}
@media all and (max-width: 900px) {
body {
padding: 5px;
}
}
@media all and (max-width: 800px) {
body {
padding: 0px;
}
}如果上面的文件是使用这样的HTML链接添加的：
<link rel="stylesheet" type="text/css" htef="foo.css" media="(max-width: 1024px)">这会被当作嵌套的媒体查询吗？换句话说，浏览器会这样解释它吗？
@media all and (max-width: 1024px) {
body {
padding: 10px;
}
@media all and (max-width: 900px) {
body {
padding: 5px;
}
}
@media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}我可能有进一步的媒体查询内的CSS文件，是与媒体查询条件，我想申请以及链接。
5条答案
按热度按时间nkoocmlb1#
以下是W3C对此的看法：
media属性表示资源应用于哪个媒体。该值必须是有效的媒体查询。
[...]
然而，如果链接是外部资源链接，则媒体属性是规定性的。当媒体属性的值与环境匹配并且其他相关条件适用时，用户代理必须应用外部资源，否则不得应用它。
**注意：**外部资源可能会在限制其适用性的范围内定义进一步的限制。例如，CSS样式表可能会有一些@media块。此规范不会覆盖此类进一步的限制或要求。
我使用以下标记在Chrome中测试了该行为：
@media规则，这些规则是用media属性声明的bwntbbo32#
关于样式表下载，以下是当前规范草案的内容：
用户代理应该响应于用户环境的变化（例如，如果设备从横向平铺到纵向取向）重新评估媒体查询，并且相应地改变依赖于那些媒体查询的任何构造的行为。
这意味着你不能只评估每个媒体查询，然后下载适当的样式表，因为环境可能会改变，导致这些媒体查询的重新评估。我认为它可以优化，但现在all browsers下载所有样式表，不管媒体查询。
对于你的第二个问题，规范没有提到HTML和CSS声明的媒体查询之间的任何区别。自CSS3以来，嵌套的媒体查询是允许的，并且将
@media-rules放在已经标记为media="…"的样式表中应该与纯CSS嵌套的媒体查询相同。mwg9r5ms3#
对于带有媒体查询的HTML链接资源，浏览器是否 * 只 * 在满足媒体查询条件时才下载链接资源？
这（强调的部分）是对通过
<link>元素中的媒体查询加载的样式表的一个非常常见的误解。无论对
<link>元素应用了什么媒体查询，所有文件都将被加载。只有当满足媒体查询时，文件才会被加载，因为无法保证浏览器在查看同一页面时，当某些属性发生更改时，浏览器不会满足它（甚至停止满足它）。例如，如果您将移动终端从纵向旋转到横向，它将停止匹配
(orientation: portrait)并开始匹配(orientation: landscape)。它需要确保后者中的样式在切换到该格式时已准备好应用，因此必须预先加载样式。<link>元素的HTML5规范没有提到media属性应该如何确定是否应该加载资源。Media Queries spec没有定义如何加载媒体查询的样式表，但是它在注解中声明了这一点：用户代理被期望（但不是必需的）响应于用户环境中的改变而重新评估和重新布局页面，例如，如果设备从横向模式倾斜到纵向模式。
im9ewurl4#
使用HTML媒体查询，无论媒体查询是否满足，CSS文件都会被下载。但是不需要的CSS的呈现会被延迟，这会提前你的初始呈现。在某种程度上，你可以考虑让它成为非呈现阻塞。但是使用CSS媒体查询，无论查询是否满足，它们都会被完全解析和处理。
0mkxixxg5#
对于带有媒体查询的HTML链接资源，浏览器是否仅在满足媒体查询条件时下载链接资源？
不可以，无论任何媒体属性值如何，都将加载链接的资源。
如果您的目标是只加载给定设备所需的媒体，您可以使用@import后跟媒体查询。如果媒体查询不支持或不适用于浏览器，@import不会加载外部CSS。然而，这意味着，基于屏幕方向的条件查询的@import文件要么在屏幕方向更改时导入文件，或者即使在方向切换时也根本不加载CSS。