移动端使用“雪碧图”

一张290*290的图片：

 html结构：

<div class="test">
    <ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

css代码：

.test{
    margin-right: auto;
    margin-left: auto;
    width: 4.0rem;//300px
    li{
        width: 1.2rem;//90px
        height: 1.2rem;
        float: left;
        background: url(http://cres.fenqile.com/res/sale/2016032404/img/test.jpg) no-repeat;
        background-size: 3.866667rem 3.866667rem;//290px
        margin: 0.066667rem;//5px
    }
    li:nth-child(1){
        background-position: -0.066667rem -0.066667rem;//-5px -5px
    }
    li:nth-child(2){
        background-position: -1.333333rem -0.066667rem;//-100px -5px
    }
    li:nth-child(3){
        background-position: -2.6rem -0.066667rem;//-195px -5px
    }
    li:nth-child(4){
        background-position: -0.066667rem -1.333333rem;
    }
    li:nth-child(5){
        background-position: -1.333333rem -1.333333rem;
    }
    li:nth-child(6){
        background-position: -2.6rem -1.333333rem;
    }
    li:nth-child(7){
        background-position: -0.066667rem -2.6rem;
    }
    li:nth-child(8){
        background-position: -1.333333rem -2.6rem;
    }
    li:nth-child(9){
        background-position: -2.6rem -2.6rem;
    }
}

网页结果呈现：