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

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

如果我使用这个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/[e-mail]') no-repeat top left;} } 

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

Answer 1

不，但您需要设置background-size属性以匹配原始尺寸：

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url('images/[e-mail]') 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) { } 

– 资源

NB。 这个min--moz-device-pixel-ratio:不是一个错字。 在某些版本的Firefox中这是一个很好logging的错误，应该这样写，以便支持旧版本（在Firefox 16之前）。 – 资源

---

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

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

不过，我个人不会build议使用速记forms，因为它在iOS <= 6或Android中不受支持，使得在大多数情况下不可靠。

Answer 2

这里的解决scheme还包括高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/[e-mail]' ) no-repeat top left / 200px 200px; } } 

正如@ 3rror404在收到评论意见后的编辑中所包含的内容，Webkit / iPhone之外还有一个世界。 有一件事情让我大部分的解决scheme都陷入了困境 ，就像在CSS-Tricks中引用上面的源代码一样，这个问题没有被充分考虑。
原始来源已经进一步。

作为一个例子，Nexus 7（2012）屏幕是一个奇怪的device-pixel-ratio为1.325的TVDPI屏幕 。 当以正常分辨率加载图像时，它们通过插值放大，因此模糊。 对于我在媒体查询中应用这个规则，以包括那些设备成功的最佳客户反馈。

Answer 3

我正在计划使用相同的图像的视网膜和非视网膜屏幕，那么这里是解决scheme。 假设你有一个200x200的图像，最上一行有两个图标，最下一行有两个图标。 所以，这是四个象限。

 .sprite-of-icons { background: url("..http://img.dovov.comicons-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％比实际值，你可以得到预期的结果。