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);} 

sprite圖在移動端的使用