视网膜显示，高分辨率背景图像 [英] Retina displays, high-res background images

问题描述

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

This might sound like a silly question.

如果我使用这个CSS片段为常规显示（其中 box-bg.png is 200px by 200px）;

If I use this CSS snippet for regular displays (Where box-bg.png is 200px by 200px);

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

到目标视网膜显示器（@ 2x图像是高分辨率版本）;

and if I use a media query like this to target retina displays (With the @2x image being the high-res version);

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

    .box{background:url('images/[e-mail]') no-repeat top left;}
}

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

Do I need to double the size of the .box div to 400px by 400px to match the new high res background image?

推荐答案

不，但您需要设置 -size 属性以匹配原始维度：

No, but you do need to set the background-size property to match the original dimensions:

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

    .box{
        background:url('images/[e-mail]') no-repeat top left;
        background-size: 200px 200px;
    }
}

---

EDIT

要为此答案添加更多内容，以下是我常用的视网膜检测查询：

To add a little more to this answer, here is the retina detection query I tend to use:

@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) { 

}

- 来源

注意。这个 min - moz-device-pixel-ratio：不是拼写错误。在某些版本的Firefox中，这是一个很好记录的错误，应该这样写，以支持旧版本（在Firefox 16之前）。
- 来源

NB. This min--moz-device-pixel-ratio: is not a typo. It is a well documented bug in certain versions of Firefox and should be written like this in order to support older versions (prior to Firefox 16). - Source

正如@LiamNewmarch在下面的注释中提到的，您可以包括 background-size 在您的简写背景声明如下：

As @LiamNewmarch mentioned in the comments below, you can include the background-size in your shorthand background declaration like so:

.box{
    background:url('images/[e-mail]') no-repeat top left / 200px 200px;
}

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

However, I personally would not advise using the shorthand form as it is not supported in iOS <= 6 or Android making it unreliable in most situations.

这篇关于视网膜显示，高分辨率背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！