手机等设备的屏幕一般精度比电脑要高，所以通常尺寸下的图片在手机下往往会显得很模糊，通过使用二倍图可以解决这个问题，下面跨屏平台Kuaping.com 讲讲移动端适配2倍图和3倍图的用法
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) {
.img {
background-image: url(../images/arrow@2x.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
background-repeat: no-repeat;
}
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min--moz-device-pixel-ratio: 3) {
.img {
background-image: url(../images/arrow@3x.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
background-repeat: no-repeat;
}
}
未经允许不得转载：跨屏互联 » 移动端适配2倍图和3倍图的用法
