레티 나 스프라이트와 고 대비 모드

Question

이렇게 까다로운 질문입니다. 스프라이트 및 고 대비 모드와 관련된 문제에 직면했습니다. 기본적으로 다음 코드와 같이 해결할 수 있습니다.

.icon:before { 
    content: url(icons.png); 
    position:relative; 
    left:-2px; 
    top:-109px; 
} 

.icon { 
    width:17px; 
    height:18px; 
    display:inline-block; 
    overflow:hidden; 
} 

멋지 네요. 그것은 효과가있다. 그러나, 내가 망막에 대한 콘텐츠 URL을 변경하면 이미지가 훨씬 더 커지고 따라서 실패 할 것입니다.

어쨌든 두 가지 장점을 모두 가지고 있습니까?

Answer 1

비 망막 이미지와 같은 방식으로 이미지를 표시하려면 이미지 너비를 설정해야합니다. 여기

, 일부 예 :

.site-header { 
    position: relative; 
    background: url('assets/images/XXXX.jpg') 0px 0px no-repeat; 
    height: 155px; 
    background-size: cover; 
    background-position:center; 
} 

망막 응답 디자인

@media 
only screen and (-webkit-min-device-pixel-ratio: 2)  and (min-width: 768px), 
only screen and ( min--moz-device-pixel-ratio: 2)  and (min-width: 768px), 
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px), 
only screen and (  min-device-pixel-ratio: 2)  and (min-width: 768px), 
only screen and (    min-resolution: 192dpi) and (min-width: 768px), 
only screen and (    min-resolution: 2dppx) and (min-width: 768px) { 

.site-header 
    { 
     position: relative; 
     background: url('assets/images/GBBO_BG_1536_R.jpg') 0px 0px no-repeat; 
     height: 148px; 
     background-size:cover; 
    } 

    /* Iphone P */ 
    #header #logo_home { 
     width: 154px; 
     height: 102px; 
     background: url('assets/images/GBBO_logo_1536_R.png') 0px 0px no-repeat; 
     background-size: 100% auto; 
       } 
} 

제거하기 : 여기

최소 폭 (반응 형 디자인) 데스크톱 CSS와 예는 응답 효과, 제거 및 "(최소 너비 : 768px)"