移動端二倍圖和三倍圖的處理方法

一倍圖：設計稿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]);
        }
    }