Question

我知道有两种方法可以添加媒体查询：

HTML LINK：

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

CSS：

@media all and (max-width: 1024px) {
    ......
}

我已阅读文档，并了解两种方法之间的明显区别。但是，以下是2个问题我怀疑你是否可以澄清：

1）浏览器是否以不同于CSS媒体查询的方式处理HTML媒体链接？我的意思是，我知道如果在css中添加CSS媒体查询，所有css文件都会被下载到所有设备，并且当浏览器解释编译的css时，只有相应的媒体查询才会生效。但是如果媒体链接是以HTML格式添加的，那么它是否意味着只有当指定宽度匹配的设备时，浏览器才会下载foo.css？与Css媒体查询相比，浏览器处理HTML媒体链接的方式是否存在差异，或者它们是否完全相同，只是添加到网页的方式不同？

2）假设foo.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" MEDIA="(max-width: 1024px)" HREF="foo.css">

这会成为浏览器查看嵌套媒体查询的方式吗？我不明白的是，如果使用html链接添加上述内容，我不知道浏览器是否真的会像这样看起来无效：

@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;
        } 

    }

}

所以我的问题是，如果我在使用HTML媒体链接添加的css文件中有进一步的媒体查询，那是否有效？

修改我在桌面上使用chrome查看了开发人员工具，我可以看到即使从桌面设备浏览也会下载平板电脑文件：

1）因此对于问题1，假设所有浏览器都包含较旧的浏览器并且移动浏览器做同样的事情是安全的，即使它们被放置在HTML链接上也会下载所有文件？

2）对于问题2，我可以看到当浏览器屏幕调整为平板电脑宽度时，Chrome确实使用了平板电脑内部的媒体查询。在html中以1024px链接的css文件被视为media =＆＃34;（max-width：1024px）＆＃34;。但是，那不意味着平板电脑的css文件中的媒体查询实际上是嵌套的媒体查询吗？虽然它有效但不是逻辑错误吗？是否有一些更严格的浏览器不认为这是有效的？

Answer 1

以下是W3C对say about this的要求：

媒体属性说明资源适用于哪种媒体。该   value必须是有效的媒体查询。

[...]

但是，如果链接是外部资源链接，那么媒体   属性是规定性的。用户代理必须应用外部   当媒体属性的值与环境匹配时的资源   其他相关条件适用，否则不得适用。

注意：外部资源可能还有其他限制   这限制了它的适用性。例如，CSS样式表可能   有一些@media块。该规范不会覆盖这样的规范   进一步的限制或要求。

我使用以下标记测试了Chrome中的行为：

<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">

显然，无论屏幕分辨率如何，Chrome都会下载所有CSS文件。
但是，它仅应用匹配样式表中的规则
- 它尊重了样式表中所有匹配的@media规则

Answer 2

关于样式表下载，以下是当前spec draft所说的内容：

用户代理应重新评估媒体查询以响应用户环境的变化，例如，如果设备从横向到纵向平铺，并相应地更改依赖于这些媒体查询的任何构造的行为。

这意味着您不能只评估每个媒体查询，然后下载相应的样式表，因为环境可能会发生变化，导致重新评估这些媒体查询。我认为它可以进行优化，但现在all browsers下载所有样式表，无论媒体查询如何。

对于您的第二个问题，规范没有提及HTML和CSS声明的媒体查询之间的任何差异。自CSS3起允许嵌套媒体查询，并且将@media - 规则放在已标记为media="…"的样式表中应与纯CSS嵌套媒体查询相同。

Answer 3

对于HTML媒体查询，无论是否满足媒体查询，都将下载CSS文件。但是，推迟不必要的CSS的使用是一种延迟，这会提高您的初始渲染速度。在某种程度上，您可以考虑使其成为非渲染阻塞。但是使用CSS媒体查询，无论查询是否满足，都可以完全解析和处理它们。

HTML LINK媒体和CSS媒体查询之间的区别

3 个答案: