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