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

Question

我有一个很多img的页面。我试图把img放在后台，对于高分辨率设备和其他img对于非高分辨率都有相同的img。我有2个问题：

1-这是mediaquerry最新和所有新的高分辨率设备，苹果视网膜和其他新的高分辨率？我正在为所有设备寻找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'); } 
}