모든 고해상도 장치에 대한 미디어 쿼리입니다. 고해상도 사진 만로드

Question

나는 img가 많은 페이지가 있습니다. 나는 고해상도 장치를 위해 같은 img를 가지고 있고 다른 고해상도를 위해 다른 img를 배경으로 img를 넣으려고합니다. 질문이 두 개 있습니다 :

1-이 새로운 미디어 장치는 최신 고해상도 장치, Apple 망막 및 다른 새로운 고해상도 제품에 유용합니까? 모든 장치에 대해 단 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'); } 
}