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

前端之家收集整理的这篇文章主要介绍了HTML LINK媒体和CSS媒体查询之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有两种方法可以添加媒体查询

HTML链接

<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确实使用了平板电脑css内的媒体查询.在html中链接为1024px的css文件被视为media =“(max-width:1024px)”.但那么,这不意味着平板电脑的css文件中的媒体查询实际上是嵌套的媒体查询吗?虽然它有效但不是逻辑错误吗?是否有一些更严格的浏览器不认为这是有效的?

解决方法

关于样式表下载,这是当前 spec draft所说的内容

User agents should re-evaluate media queries in response to changes in the user environment,for example if the device is tiled from landscape to portrait orientation,and change the behavior of any constructs dependent on those media queries accordingly.

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

对于第二个问题,规范没有提到HTML和CSS声明的媒体查询之间的任何区别.自CSS3起允许嵌套媒体查询,并将@media-rules放在已标记为media =“…”的样式表中,应与纯CSS嵌套媒体查询相同.

原文链接:https://www.f2er.com/html/226410.html

猜你在找的HTML相关文章