使用@media查询时,手机是否会加载不相关的查询和图片？

Question

如果我将CSS基于移动样式,然后@media对逐渐变大的显示器(平板电脑,台式机等)使用查询,移动设备是否会使用桌面样式？

我相信通常情况下,移动设备会加载所有图像,即使它们不适用于自己特定的媒体大小.这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像.

我想要做的是使用一个背景为更大的网站版本:

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

和另一个移动版本:

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

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

Answer 1

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

如果要检查此行为,请尝试使用Mobitest(http://mobitest.akamai.com/)或系留设备加载页面.

如果你使用单独的CSS文件(我也不会劝你),浏览器会下载每个文件,即使它不需要它们,这也是CSSOM的限制.一些浏览器(例如基于WebKit和Blink的浏览器)优先考虑样式表,因此首先下载呈现页面所需的页面,然后在某些时候下载其他页面.

需要注意的一点是显示:内容图像上没有,因为在许多情况下它不会阻止下载.Tim Kadlec在这里更多地探讨了这个问题:http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

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

测试#4中回答了您的具体问题 - 结果不稳定.最好对您的图像进行媒体查询.