使用@media实现移动端使用@2x,@3x切换

 

　　

/*dpr比值为1的css代码 */
div{
width:300px;
height:200px;
background:url(img/button@1x.png) ;
}
/* dpr比值为2的css代码 */
@media screen and (-webkit-device-pixel-ratio: 2) {
div{
width:300px;
height:200px;
background:url(img/button@2x.png) ;
}
}
/*dpr比值为3的css代码 */
@media screen and (-webkit-device-pixel-ratio: 3) {
div{
width:300px;
height:200px;
background:url(img/button@3x.png) ;
}
}