視網膜精靈和高對比度模式

Question

所以這是一個棘手的問題，我知道。我遇到了精靈和高對比度模式的問題，基本上它可以通過代碼解決如下：

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

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

這很好。它確實有效。但是，如果我更改視網膜的內容網址，圖像將會變得更大，因此它將失敗。

反正有兩全其美？

Answer 1

如果要以與非視網膜圖像相同的方式顯示圖像，則需要設置圖像的寬度。

這裏，一些例子：

這裏是與最小寬度（響應設計） 桌面的CSS的示例：

.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; 
       } 
} 

要取出響應效果，刪除「和（最小寬度：768px）」