移動端使用「雪碧圖」

一張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代碼：

 1 .test{
 2     margin-right: auto;
 3     margin-left: auto;
 4     width: 4.0rem;//300px
 5     li{
 6         width: 1.2rem;//90px
 7         height: 1.2rem;
 8         float: left;
 9         background: url(http://cres.fenqile.com/res/sale/2016032404/img/test.jpg) no-repeat;
10         background-size: 3.866667rem 3.866667rem;//290px
11         margin: 0.066667rem;//5px
12     }
13     li:nth-child(1){
14         background-position: -0.066667rem -0.066667rem;//-5px -5px
15     }
16     li:nth-child(2){
17         background-position: -1.333333rem -0.066667rem;//-100px -5px
18     }
19     li:nth-child(3){
20         background-position: -2.6rem -0.066667rem;//-195px -5px
21     }
22     li:nth-child(4){
23         background-position: -0.066667rem -1.333333rem;
24     }
25     li:nth-child(5){
26         background-position: -1.333333rem -1.333333rem;
27     }
28     li:nth-child(6){
29         background-position: -2.6rem -1.333333rem;
30     }
31     li:nth-child(7){
32         background-position: -0.066667rem -2.6rem;
33     }
34     li:nth-child(8){
35         background-position: -1.333333rem -2.6rem;
36     }
37     li:nth-child(9){
38         background-position: -2.6rem -2.6rem;
39     }
40 }

網頁結果呈現：