视网膜显示器，高分辨率背景图像
这听起来可能是一个愚蠢的问题。
如果我将这个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才能匹配新的高分辨率背景图像？
回答 4
Stack Overflow用户
发布于 2013-04-23 03:04:24
我是否需要将.box div的大小加倍到400px x 400px才能匹配新的高分辨率背景图像
不需要，但您需要设置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的某些版本中，这是一个有充分记录的bug，应该这样编写，以便支持较旧的版本(在Firefox16之前)。- Source
正如@LiamNewmarch在下面的评论中提到的，您可以将background-size包含在您的速记background声明中，如下所示：
.box{
background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}然而，我个人不建议使用速记形式，因为它在iOS <= 6或安卓系统中不受支持，这使得它在大多数情况下都不可靠。
Stack Overflow用户
发布于 2014-07-09 02:31:49
这是一个解决方案，还包括高(Er)分辨率的()设备 > ~160点每英寸像相当多的非iOS设备(f.e.：Google Nexus7 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-Tricks源代码，就是没有充分考虑到这一点。
original source已经更进一步了。
举个例子，Nexus7 (2012)的屏幕就是一个带有奇怪 的TVDPI屏幕。当以正常分辨率加载图像时，它们会通过插值进行放大，因此会变得模糊。对我来说，在媒体查询中应用这一规则，以包括那些设备成功地获得了最佳客户反馈。
Stack Overflow用户
发布于 2016-12-01 14:30:15
如果你打算在视网膜和非视网膜屏幕上使用相同的图像，那么这里就是解决方案。假设你有一个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%，就可以得到预期的结果。
Ryan Benhase提供的另一个方便的SCSS混入解决方案。
/****************************
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 );
}有关上述mixin READ HERE的更多信息。
https://stackoverflow.com/questions/16154494
复制相似问题
腾讯云开发者
