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

Question

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

如果我将此 CSS 片段用于常规显示(其中 box-bg.png 为 200px x 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 x 400px 以匹配新的高分辨率背景图像？

Answer 1

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 属性以匹配原始尺寸:

@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

---

正如@LiamNewmarch 在下面的评论中提到的，您可以在速记 background 声明中包含 background-size，如下所示:

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

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