这可能听起来像一个愚蠢的问题。
如果我用这个CSS代码段用于常规显示器（凡box-bg.png是200像素由200像素）;
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
和，如果我使用的媒体查询这样定位到视网膜显示器（随着@ 2倍图像是高清晰度的版本）;
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/box-bg@2x.png') no-repeat top left;}
}
我需要的规模翻番.box由400像素的div 400像素，以配合新的高分辨率的背景图像？
没有，但你确实需要设置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) {
}
- 资源
NB。 此min--moz-device-pixel-ratio:是不是一个错字。 这是在Firefox的某些版本有案可稽的错误，应以（到Firefox 16之前）支持老版本中这样写。 - 资源
作为@LiamNewmarch在下面的评论中提到，你可以包括background-size在速记background声明，如下所示：
.box{
background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}
不过，我个人并不建议使用简写形式，因为它是不支持的iOS <= 6或Android使得它在大多数情况下不可靠。
这里还包括高（ER）的解决方案DPI（ MDPI ）装置>〜160点每英寸的点数一样不少非iOS设备（FE： 谷歌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，有超越的Webkit / iPhone的世界。 有一两件事，我的错误与周围到目前为止像一个源在上面提到大多数解决方案CSS-技巧 ，是，这是没有充分考虑。
在原始的源就已经更进一步。
作为示例了Nexus 7（2012）的屏幕是屏幕TVDPI一个奇怪device-pixel-ratio的1.325 。 当加载与正常分辨率的图像，他们通过插值，因此模糊放大的。 对我来说，在媒体查询应用该规则包括这些设备成功地在最好的客户反馈。
如果你是刨去使用相同的图像视网膜和非视网膜屏幕，然后在这里是解决方案。 你说你有一个像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％的定位，就可以得到预期的结果。
通过另一个方便SCSS混入水溶液瑞安Benhase 。
/****************************
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 );
}
有关上述混入更多的信息在这里阅读 。
