移动端二倍图和三倍图的处理方法

一倍图：设计稿320px 原名.png。
二倍图：设计稿640px 原名@2x.png
三倍图：设计稿750px 原名@3x.png

 

    /*基础样式*/
    .img{
        background-image: url(../images/img.png);
　　　　 /*在我当前的开发场景下，以下这几个样式无论是在几倍图的情况下都不会改变，因此当设备像素为二倍和三倍时，只需要改变图片即可（根据自己的样式需求来）*/
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
    }
    /* 如果设备像素大于等于2，则用2倍图 */
    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) {
        .img {
            background-image: url(../images/[e-mail]);
        }
    }
    /* 如果设备像素大于等于3，则用3倍图 */
    @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min--moz-device-pixel-ratio: 3) {
        .img {
            background-image: url(../images/[e-mail]);
        }
    }