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

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

2 个答案: