mobile - 所有高分辨率设备的媒体查询。仅加载高分辨率照片

Question

我有一个包含很多 img 的页面。我尝试将 img 放在背景中，以使高分辨率设备具有相同的 img 和非高分辨率设备的其他 img。我有两个问题：

1. 这个媒体查询是最新的并且对所有新的高分辨率设备、Apple Retina 和其他新的高分辨率设备有用吗？我正在寻找所有设备的 1 个媒体查询。可能吗？

2. 在这种情况下，高分辨率设备也会加载非高分辨率图像吗？如果是这样，如何使高分辨率设备仅加载高分辨率照片？

HTML：

<div class="photo"> </div> 

CSS：

.photo {
    position:relative;
    margin:0 auto;
    width:980px; height:660px;

    background-image:url('img/normal/1.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

/* for all hi-res */
@media (-webkit-min-device-pixel-ratio: 1.5), 
       (min-resolution: 144dpi){ 
.photo { background-image:url('img/2x/1.jpg'); }
}

Answer 1

用于高分辨率图形

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #photo { background-image:url('img/2/1.jpg''); }
}

或其他高分辨率图形

@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    #photo { background-image:url('img/1.25/1.jpg'); }
}


@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    #photo { background-image:url('img/1.3/1.jpg'); }
}


@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    #photo { background-image:url('img/1.5/1.jpg'); }
}