将覆盖视网膜设备的背景图像样式下载这两个图像

Question

通过以下内容，我想使用更大的背景图像进行双密度显示。但是，支持媒体查询的设备是只下载较大的图像，还是同时下载两者？

.logo {
    background: url('logo.jpg');
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
     .logo {
         background: url('logo-double-density.jpg');
         background-size: 40px 40px; //size is half of the actual image 
     }
}

Answer 1

他们只会下载大图像，因为以前的背景属性已被覆盖。

您可以使用浏览器轻松测试（我使用Chrome，但我相信其他人也会做同样的事情）。

制作一些像 CSS

body {
    background-image: url(somethingThatDoesNotExist.jpg);
}
body {
    background-image: url(somethingElseThatDoesNotExist.jpg);
}

查看控制台以查看 404 错误 - 您只会得到一个：http://jsfiddle.net/RYPu9/

Answer 2

你使用Modernizr吗？如果是这样，这将使生活更轻松，因为您在 css 中所做的只是：

.logo {background: url("../logo.svg") no-repeat;}
.no-svg .logo {background: url("../logo.png") no-repeat;}