视网膜显示器，高分辨率背景图像
视网膜显示器，高分辨率背景图像
提问于 2013-04-23 02:51:28
这听起来可能是一个愚蠢的问题。
如果我将这个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才能匹配新的高分辨率背景图像？
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16154494
复制相关文章
相似问题
腾讯云开发者
