移动端图片dpr倍数展示不同图片 

//css方法

.photo {background-image: url(image100.png);}

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.photo {
background-image: url(image200.png);
background-size: 100px 100px;
}
}

@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.photo {
background-image: url(image300.png);
background-size: 100px 100px;
}
}
//html方法
<<span style="color:#cc7832;">img src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
posted @ 2020-04-01 11:06  edczjw  阅读(634)  评论(0)  编辑  收藏  举报