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

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

<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

回到顶部