我是否需要将 .box div 的大小加倍为 400 像素乘 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) {
}
- 资源
注意。这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 不支持它,因此在大多数情况下都不可靠。