/* 如果设备像素大于等于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倍图的处理方法
最新推荐文章于 2024-03-29 21:57:13 发布