CSS Sprite精灵图如何缩放大小

今天在写移动端网页的时候，由于PC和移动端的分辨率不同，所以精灵图需要缩小

可以用两个方法解决：

• transform:scale( x )：
  语法为：transform: scale(x，y). 同时有scaleX, scaleY专门的x, y方向的控制。
  例如：transform: scale(0.5) 缩小为原来的一半
  和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！
• zoom：x
  例如：zoom：0.5 也是缩小为原来的一半

zoom和transform:scale的差别是：、

1：在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。意思是，当你给一个div固定宽高时，scale变化的时候，其原本的宽高还是不变的，你给div height200px,width:200px, scale(0.5)即为缩小为原来的一半时，他的height和width还是200px, 只不过里面的元素缩小了而已。因此，就没有layout的重计算。

2：但是zoom牵一发动全身，zoom：0.5后 ，width和height就变成了100px。