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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

我已经阅读了文档，并且了解了这两种方法之间的明显区别。但是，以下是我有两个疑问，请问您是否可以澄清：

1）浏览器对HTML Media Link的处理方式是否不同于CSS Media

Query？我的意思是，我知道是否在CSS中添加CSS媒体查询，无论如何，所有CSS文件都会下载到所有设备，并且当浏览器解释编译后的CSS时，只有相应的媒体查询才会生效。但是，如果将Media

Link添加为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确实使用了平板电脑css内的媒体查询。html中以1024px链接的css文件被视为media

=“（max-

width：1024px）”。但是，那不是意味着放在平板电脑的css文件中的媒体查询实际上是嵌套的媒体查询吗？虽然有效，但在逻辑上是错误的吗？某些更严格的浏览器是否认为这无效？

回答：

关于样式表的下载，这是当前规范草案的内容：

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

这意味着您不能只评估每个媒体查询，然后下载适当的样式表，因为环境可能会发生变化，从而导致对这些媒体查询的重新评估。我认为可以对其进行优化，但是就目前而言，所有浏览器都会下载所有样式表，而与媒体查询无关。

对于第二个问题，规范没有提及HTML声明的和CSS声明的媒体查询之间的任何区别。从CSS3开始，允许嵌套媒体查询，并且将@media-rules放入已经标记过的样式表中media="…"应该与纯CSS嵌套媒体查询相同。

以上是 HTML LINK媒体和CSS媒体查询之间的区别 的全部内容， 来源链接： utcz.com/qa/402836.html

回到顶部