HTML LINK媒体和CSS媒体查询之间的区别 [英] Difference Between HTML LINK Media and CSS Media Queries

问题描述

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

I know there are 2 ways to add Media queries:

HTML LINK：

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

CSS：

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

我已经阅读了文档，我明白这两种方法之间的明显区别。但是，以下是我有疑问，如果你可以澄清请：

I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:

1）浏览器处理HTML媒体链接不同于CSS媒体查询？我的意思是，我知道如果CSS媒体查询是添加在CSS内，所有的CSS文件都下载到所有设备，只有相应的媒体查询生效，当浏览器解释编译的CSS。但是如果媒体链接添加为HTML，是否意味着浏览器将只下载foo.css只有当设备具有匹配的指定宽度？与Css媒体查询相比，浏览器处理HTML媒体链接的方式是否有所不同？还是只是不同的添加到网页的方式？

1) Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?

2）让我们说如果foo.css也有更小的宽度，而不是1024px的媒体查询，像这样：

2) Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:

body {
   padding: 10px;
}     
@media all and (max-width: 900px) {
    body {
       padding: 5px;
    }     
}    
@media all and (max-width: 800px) {
    body {
       padding: 0px;
    }     
}

如果上述文件是使用HTML Link ：

If the above file is added using HTML Link like this:

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

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

Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:

@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文件中使用HTML媒体链接添加了更多的媒体查询，是否有效？

So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?

/ strong>
我在开发者工具中使用Chrome从我的桌面，我可以看到即使从桌面设备浏览平板电脑文件也下载：

I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:

1）所以对于问题1，是否可以假定所有的浏览器包括旧的浏览器和移动浏览器做同样的事情，即下载所有文件，即使他们被放置在HTML链接？

1) So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?

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

2) For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?

推荐答案

关于样式表下载，下面是当前规范草案说：

Regarding the stylesheet download, here is what the current spec draft says:

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

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.

这意味着您不能只评估每个媒体查询，然后下载适当的样式表，因为环境可能会更改，导致重新评估这些媒体查询。我认为它可以优化，但现在所有浏览器下载所有样式表，无论媒体查询。

This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.

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

For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting @media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.

这篇关于HTML LINK媒体和CSS媒体查询之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！