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

【问题标题】：Retina sprites and high contrast mode视网膜精灵和高对比度模式
【发布时间】：2013-10-04 07:51:00
【问题描述】：

所以我知道这是一个棘手的问题。我遇到过精灵和高对比度模式的问题，基本上可以通过以下代码解决：

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

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

这很好。它确实有效。但是，如果我更改视网膜的内容网址，图像会大得多，因此会失败。

有没有两全其美的方法？

【问题讨论】：

标签： css retina high-contrast

【解决方案1】：

如果您想以与非视网膜图像相同的方式显示图像，则需要设置图像的宽度。

这里有一些例子：

这是一个最小宽度的例子（响应式设计）桌面 CSS：

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

Retina 响应式设计

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

要移除响应式效果，请移除“and (min-width: 768px)”

【讨论】：