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

问题描述

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

This might sound like a silly question.

如果我将此 CSS 片段用于常规显示(其中 box-bg.png 为 200px x 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/[email protected]') no-repeat top left;}
}

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

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

推荐答案

否，但您确实需要设置 background-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/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

编辑

为了给这个答案补充一点，这是我倾向于使用的视网膜检测查询:

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 声明中包含 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/[email protected]') 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.

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