使用@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/