视网膜精灵和高对比度模式

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）”