html - HTML媒体查询和CSS媒体查询的区别

Question

我知道媒体查询可以在 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 文件也有针对 1024 像素以外的更小宽度的媒体查询，如下所示:

   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 文件中有更多媒体查询，该文件与我也想应用的媒体查询条件相关联。

Answer 1

这是 W3C 对 say about this 的要求:

The media attribute says which media the resource applies to. Thevalue must be a valid media query.

[...]

However, if the link is an external resource link, then the mediaattribute is prescriptive. The user agent must apply the externalresource when the media attribute's value matches the environment andthe other relevant conditions apply, and must not apply it otherwise.

Note: The external resource might have further restrictions defined withinthat limit its applicability. For example, a CSS style sheet mighthave some @media blocks. This specification does not override suchfurther restrictions or requirements.

我使用以下标记测试了 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 规则，在用媒体属性声明的样式表中