Question

我有一个包含很多img的页面。我尝试将img放在后台，为高分辨率设备提供相同的img，为非高分辨率设置其他img。我有两个问题：

1-这个媒体是否是最新的，适用于所有新的高分辨率设备，Apple视网膜和其他新的高分辨率？我正在寻找所有设备的1个媒体查询。有可能吗？

2-在这种情况下，高分辨率设备也将加载非高分辨率img？如果是这样，如何制作高分辨率设备只加载高分辨率照片？

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

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

1 个答案: