css中zoom和scale_css zoom scale

css中我们常用来缩放的样式元素是transform:scale；
也还有我们不熟悉的zoom，在实际的应用场景中，我们需要根据自身项目的需要，结合不同的解决方案的优缺点来选择适合我们项目解决方案。

浏览器的兼容性：

1.1 zoom在早年是属于IE浏览器的私有工具，但是，现在，除了FireFox浏览器（FireFox浏览器不支持），其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了。
而transform下的scale就不一样了，是明明确确写入规范的
1.2 zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸。
1.3 transform 从IE9 到其他现代浏览器都支持

使用方式：

2.1 zoom:
百分比值：zoom:50%，表示缩小到原来的一半。
数值：zoom:0.5，表示缩小到原来的一半。
normal关键字：zoom:normal等同于zoom:1.
2.2 transform: scale()
语法为：transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制。

和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！

其他差异

更深层次的差异
3.1 zoom的缩放是相对于左上角的；而scale默认是居中缩放；
3.2 zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
3.3 zoom和scale对元素的渲染计算方法可能有差异（如下截图示意）。

3.4 对图片的缩放，scale导致模糊
3.5 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸

渲染性能的差异

由于zoom的缩放会改变元素的真实空间大小。
根据测试，在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。这其实很好理解，对吧。scale呢变化时候，其原本的尺寸是不变的，因此，就没有layout的重计算；但是zoom牵一发动全身，就麻烦地多！

也就是所zoom会一起重排重绘，scale只会引起重绘，zoom的渲染性能会比较差。

总结

下面用表格来更加清晰的对比一下吧：