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

时间:2013-04-22 18:51:28

标签: css responsive-design media-queries

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

如果我将此CSS代码段用于常规显示(其中box-bg.png为200px×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;}
}

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

3 个答案:

答案 0 :(得分:171)

不,但您需要设置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) { 

}

- Source

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


正如@LiamNewmarch在下面的评论中所提到的,您可以在简写background-size声明中加入background,如下所示:

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

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

答案 1 :(得分:13)

此处的解决方案还包括高(呃)DPI(MDPI)设备>每英寸约160个点喜欢相当多的非iOS设备(例如: 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上面引用的那个解决方案一样,这个问题并没有完全考虑在内。
original source已经进一步发展了。

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

答案 2 :(得分:1)

如果您计划将相同的图像用于视网膜和非视网膜屏幕,那么这就是解决方案。假设您有200x200的图像,并且在顶行中有两个图标,在底行中有两个图标。所以,它是四个象限。

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }

将精灵图标缩放和定位到实际值的50%,即可获得预期效果。

另一个方便的SCSS mixin解决方案Ryan Benhase

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

有关上述mixin READ HERE的更多信息。