sprite圖在移動端的使用

 作移動端頁面時，設計稿中的切片圖片每每是實際的2倍,此處記錄圖片正常顯示大小的技巧。 

 

當圖片是單張的話，能夠對容器設計實際大小，而後設置background-image,爲了讓圖片縮小一倍，能夠設置background-size:contain;

如：圖片尺寸是20*20，可是在移動端頁面顯示的則是10*10，此時，對容器進行設置：

 

#contain{ width: 10px; height: 10px; background: url(images/xx.png) no-repeat 0 0; background-size: contain;}  

 

當圖片不是單張的而是一張sprite圖，那麼首先須要對容易設置於圖片同樣的大小，而後使用transform:scale(0.5)進行縮放一倍。

#contain{ width: 20px; height: 20px; background: url(images/sprite.png) no-repeat -200px 0; transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5);}