【发布时间】：2014-10-31 21:47:03
【问题描述】：
我知道添加媒体查询有两种方法：
HTML 链接：
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS：
@media all and (max-width: 1024px) {
......
}
我已阅读文档并且了解这两种方法之间的明显区别。但是，以下是我怀疑是否可以澄清的 2 个问题：
-
浏览器对 HTML 媒体链接的处理方式是否与 CSS 媒体查询不同？我的意思是，我知道是否在 css 中添加了 CSS 媒体查询，无论如何，所有 css 文件都会下载到所有设备，并且当浏览器解释编译后的 css 时，只有相应的媒体查询才会生效。但是如果媒体链接是在 HTML 中添加的，是否意味着浏览器只有在匹配指定宽度的设备时才会下载 foo.css？与 Css 媒体查询相比，浏览器处理 HTML 媒体链接的方式是否有所不同，还是完全一样，只是添加到网页的方式不同？
-
假设 foo.css 是否还有针对 1024 像素以外的更小宽度的媒体查询，如下所示：
身体{ 填充：10px； }
@media all and (max-width: 900px) { 身体 { 填充：5px； }
}
@media all and (max-width: 800px) { 身体 { 填充：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，假设所有浏览器（包括旧版浏览器）和移动浏览器执行相同的操作是否安全，即下载所有文件，即使它们位于 HTML 链接中？
-
对于问题 2，我可以看到当浏览器屏幕调整为平板电脑宽度时，chrome 确实使用平板电脑 css 内的媒体查询。 html 中为 1024px 链接的 css 文件被视为 media="(max-width: 1024px)"。但是，这是否意味着放置在平板电脑的 css 文件中的媒体查询实际上是嵌套的媒体查询？虽然有效，但逻辑上是不是错了？一些更严格的浏览器不认为这是有效的吗？
【问题讨论】：
-
这是您可以轻松测试的内容。只需查看您的浏览器开发人员工具，看看感兴趣的浏览器是否使用未满足的“媒体”限定符对
<link>发出 HTTP 请求。 -
@Pointy 当然。我现在做了。 :) 我已经通过编辑更新了我的问题。
-
我只是想提出一个想法，因为我不确定。当涉及到包含时，我相信媒体查询只是包含 css 的选择器，而不是执行的布尔值。我想浏览器将下载和编译所有资源，而不管媒体查询如何，并在适当的地方应用规则。
-
所以我想最后，链接标签媒体属性的唯一用途是帮助模块化您的响应式 CSS 代码...
标签： html css media-queries