CSS3：移动设备在内部媒体查询时会加载背景图像吗？

Question

如果我有以下内容：

div {background: #000}

@media (min-width: 1000px) {
     div {background: url(myimage.jpg)}
}

例如，320px宽的智能手机是否仍会下载该背景图片？

谢谢！

Answer 1

这取决于设备。通常，我们的想法是，只有视口宽度大于1000px的设备才会在上面的示例中下载图像，但不能保证。这是一个关于这个主题的有趣研究：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

我认为myimage.jpg不会被320px屏幕的智能手机下载。

如果媒体查询中有dispaly:none，则图像将下载到较小的屏幕，但实际上并未显示。