使用@media查询时，手机是否会加载与之不相关的查询和图像？

Question

如果我基于移动端样式编写CSS，然后使用@media查询逐渐应用于更大的屏幕（平板电脑、桌面等），那么移动设备会使用桌面端的样式吗？

我认为通常情况下，移动设备会加载所有图片，即使这些图片不适用于其特定的媒体大小。这意味着它将加载所有图片并隐藏不匹配其查询式样表的图片。

我正在尝试为网站的较大版本使用一个背景：

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

还需要为移动版本创建另一个页面：

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

如果我在任何媒体查询之前应用移动CSS，并使用像@media screen and (min-device-width: 481px) {...}这样的查询添加大型媒体CSS，移动设备是否也会加载大型图像？

- ChaBuku Bakke

---

你可以在桌面浏览器上测试相反的情况。将背景图像放在 max-device-width: 1px 中，并在开发者工具中检查是否已加载。 - millimoose

同意@millimoose的观点。在浏览器开发工具中检查您的网络选项卡。 - Christopher Marshall

就我所知，似乎在媒体查询中未应用的内容都不会被获取。 - millimoose

这里有一篇值得阅读的研究文章：http://timkadlec.com/2012/04/media-query-asset-downloading-results/ - Ravimallya

Answer 1

行为取决于浏览器，但iOS Safari和Android Chrome将尊重媒体查询，并仅下载适用于媒体查询的背景图像。

如果您想检查此行为，请尝试使用Mobitest（http://mobitest.akamai.com/）或连接的设备加载页面。

如果您使用单独的CSS文件（我建议您不要这样做），即使浏览器不需要它们，它也会下载每个CSS文件，这是CSSOM的限制。一些浏览器，例如基于WebKit和Blink的浏览器会优先处理样式表，因此首先下载呈现页面所需的样式表，然后在稍后某个时间下载其余的样式表。

要注意的一件事是，对于内容图像上的display:none，在许多情况下不会阻止下载。Tim Kadlec在这里更详细地探讨了这个问题：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

- Andy Davies

---

自2012年Tim的文章以来，这方面有所改善了吗？ - gpr

好奇一下，如果你调整浏览器大小，选择了一个不同的背景图片但尚未加载，那么背景会消失还是旧图像在被替换之前保留？ - gdbj

@gdbj 背景会消失，因为 CSS 指定了使用不同的背景。它的行为方式与该屏幕尺寸的初始页面加载时相同。 - jjspace

Answer 2

Tim Kadlec为此做了一些很棒的研究- 媒体查询和资源下载结果

你的具体问题在测试＃4中得到回答-结果不稳定。最好为您的图像设置媒体查询。

- blogjunkie

Answer 3

这听起来取决于浏览器，但我想任何值得一试的移动浏览器都会尝试通过不加载标记为不适用于其的图像(可能也不会加载整个样式表)来减少数据使用量。此外，许多移动浏览器喜欢不被识别为移动浏览器。当我在iPad上打开一个网站时，手机样式表强制我在9.7英寸的屏幕上查看窄小的单列网站，我知道我很讨厌这种感觉。

因此，媒体查询是不可靠的，但仍然是有价值的（只要使用负责任），这并不能帮助一个相当晦涩（但仍然不错）的问题；现在是时候进行一些测试了！

大多数现代桌面浏览器都自带开发者工具。 我目前最喜欢的是FireFox的黑暗而漂亮的Web检查器（3D视图特别令人印象深刻）。 但是在移动设备上呢？您的大部分移动受众将不会使用带有开发工具的浏览器。

好的，你有几个选择：

• Firebug Lite在移动浏览器上有一些混合的结果，但在大多数情况下都是一个很好的选择（其他检查器不可用）。它似乎可以在iOS和其他具有HTML5支持的移动浏览器中使用。
• 这个问题建议使用称为“weinre”的东西。 我从未使用过它，但它看起来足够正规。
• 如果您只针对某些特定浏览器，许多浏览器包括开发工具。例如Google Chrome for Android！

无论你选择什么，你都需要寻找某种资产查看器；也许是时间轴视图。任何可以让您查看页面加载的内容，加载的顺序以及加载所花费的时间的工具。

祝你好运！

- Sandy Gifford

---

我可以确定地告诉你，几乎每个浏览器都会下载所有引用的样式表，包括备用样式表和受媒体查询限制的样式表（通过Opera移动模拟器和Android模拟器确认）。另一方面，在样式表中引用的图像只有在需要时才会被下载。 - cimmanon

好的，知道了！希望其他信息也是相当可靠的，对吧？ - Sandy Gifford

你其实不需要开发者工具，你可以在路由器上记录HTTP请求或拦截手机流量。 - millimoose

你可以这样做！那将是另一种解决方案，你应该绝对提交一个单独的答案！这将是非常有用的信息。 - Sandy Gifford