css - 视网膜设备的覆盖背景图像样式会下载两个图像吗？

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;}