Retina显示,高分辨率背景图像

Question

这可能听起来像一个愚蠢的问题.

如果我使用这个CSS片段进行常规显示(其中box-bg.png200px乘200px);

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

如果我使用这样的媒体查询来定位视网膜显示(使用@ 2x图像作为高分辨率版本);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

我是否需要将.boxdiv 的大小加倍到400px乘以400px以匹配新的高分辨率背景图像？

Answer 1

不,但您需要设置background-size属性以匹配原始尺寸:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

编辑

为了给这个答案增加一点,这里是我倾向于使用的视网膜检测查询:

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

}

- 资源

NB.这min--moz-device-pixel-ratio:不是一个错字.在某些版本的Firefox中,这是一个记录良好的错误,应该这样写,以支持旧版本(在Firefox 16之前). - 资源

正如@LiamNewmarch在下面的评论中所提到的,你可以background-size在你的速记background声明中加入如下:

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

但是,我个人不会建议使用速记表格,因为iOS <= 6或Android不支持它在大多数情况下使其不可靠.

Answer 2

这里的解决方案还包括高(呃)DPI(MDPI)设备>每英寸约160个点,就像很多非iOS设备一样(fe:Google Nexus 7 2012):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

在收到评论反馈后,他的编辑中包含了@ 3rror404,这是一个超越Webkit/iPhone的世界.到目前为止,大多数解决方案的一件事让我感到困惑,就像CSS-Tricks上面引用的那个解决方案一样,这个问题没有得到充分考虑.
在原始的源就已经更进一步.

作为一个例子,Nexus 7(2012)屏幕是一个奇怪device-pixel-ratio的1.325 TVDPI屏幕.当以正常分辨率加载图像时,它们通过插值进行放大,因此模糊.对于我在媒体查询中应用此规则,以包括那些成功获得最佳客户反馈的设备.

Answer 3

您可以使用 image-set()。这个 CSS 函数目前支持有限，但它确实有效。有关它的更多信息，请参阅 MND 网络文档，但这里是它的工作原理的示例：

.box {
  background-image: -webkit-image-set(
    url('images/box-bg.png') 1x,
    url('images/box-bg@2x.png') 2x); /* Temporary fallback for Chrome and Safari browsers until they support 'image-set()' better */
  background-image: image-set(
    url('images/box-bg.png') 1x,
    url('images/box-bg@2x.png') 2x);
}

“1x”和“2x”是此处的分辨率。视网膜显示屏为“2x”。