视网膜显示屏，高分辨率背景图像答案

【问题标题】：Retina displays, high-res background images视网膜显示屏，高分辨率背景图像
【发布时间】：2013-04-15 18:58:47
【问题描述】：

这听起来像是一个愚蠢的问题。

如果我将此 CSS sn-p 用于常规显示（其中 box-bg.png 是 200 像素 x 200 像素）；

.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 的大小加倍为 400 x 400 像素以匹配新的高分辨率背景图片？

【问题讨论】：

images/box-bg@2x.png的尺寸是多少？请把这个问题放在绝对清楚的地方。

标签： css responsive-design media-queries

【解决方案1】：

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

否，但您确实需要设置 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

注意。这个min--moz-device-pixel-ratio: 不是错字。这是 Firefox 某些版本中的一个有据可查的错误，应该这样编写以支持旧版本（Firefox 16 之前）。 - Source

正如下面 cmets 中提到的 @LiamNewmarch，您可以在简写的 background 声明中包含 background-size，如下所示：

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

但是，我个人不建议使用速记形式，因为它在 iOS

【讨论】：

对于设置整页背景的背景大小有什么建议吗？我知道 x 组件的宽度，但是 y 呢？
@theOther 在这种情况下，您可能希望使用 background-size: cover; 。这将保持纵横比，同时用图像“覆盖”整个背景。
如果您愿意，可以将background-size 属性集成到background 中，如下所示：background: url('images/box-bg@2x.png') no-repeat top left / 200px 200px。请注意，不支持background-size 的浏览器将忽略此规则。
@LiamNewmarch 我不建议我自己作为 Android 似乎不理解速记形式
@3rror404 好吧，很公平。谢谢！

【解决方案2】：

这是一个解决方案，还包括 High(er)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 在收到来自 cmets 的反馈后在他的编辑中包含的那样，Webkit/iPhone 之外还有一个世界。到目前为止，大多数解决方案都困扰着我的一件事，例如上面在 CSS-Tricks 引用的源代码，那就是没有完全考虑到这一点。
original source 已经走得更远了。

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

【讨论】：

每个维度的 2x 图像具有正好 4x 的像素（例如，理论上可以预期为 4x 大小），而 1.325 * 1.325 仅支持增加 1.755625 像素。我认为使用 1.325dppi 时，图像的质量会有所损失，但是如果你使用 HiDPI，那么客户端将只需要等待更长时间来加载页面，调整图像大小的功耗会更高（而且 Nexus 7 表相当以随机重启而闻名），并消耗更多带宽。所以，我建议坚持 @2x 只提供给 2dppx+ 客户。

【解决方案3】：

如果您打算在视网膜和非视网膜屏幕上使用相同的图像，那么这就是解决方案。假设您有一张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%，可以得到预期的结果。

Ryan Benhase 提供的另一个方便的 SCSS 混合解决方案。

/****************************
 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。

【讨论】：

【解决方案4】：

你可以使用 image-set()。这个 CSS 函数目前 has limited support，但它确实有效。 More about it on MND web docs，但这里是它的工作原理示例：

.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' 用于视网膜显示器。

【讨论】：