解决方法
在您的
HTML中,创建< div>像这样：
<div class="ninjas-image"></div>
在你的CSS中,添加：
.ninjas-image {
background-image: url('ninja-devices.png');
width: 410px;
height: 450px;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi) {
.ninjas-image {
background-image: url('ninja-devices@2x.png');
background-size: 410px 450px;
}
}
这里的魔法是在CSS @media查询中.我们有一个双重尺寸的图像(ninja-devices@2x.png),当设备报告“设备像素比”为1.5(144 dpi)或更高时,我们进入.这样做可以通过将原始的较小图像传递给非视网膜设备来节省带宽,当然,它在视网膜设备上看起来非常棒.
注意：
这个答案在2016年更新,以反映最佳实践. min-device-pixel-ratio没有达到标准.相反,最小分辨率被添加到标准中,但桌面和移动Safari在编写时不支持(因此-webkit-min-device-pixel-ratio fallback).您可以查看最新信息：http://caniuse.com/#feat=css-media-resolution.
