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

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

Retina精灵和高对比度模式

1 个答案: