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。

你可能感兴趣的:(css)