zoom和transform:scale的区别

zoom简介

在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等。
其支持的值类型有:
百分比值:zoom:50%,表示缩小到原来的一半。
数值:zoom:0.5,表示缩小到原来的一半。
normal关键字:zoom:normal等同于zoom:1.

区别

  • 虽然Chrome/Safari浏览器支持了zoom属性,但是zoom并不是标准属性,transform下的scale就不一样了,是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为:transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制。
  • 和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。不过能是负数,可以只控制1个维度。而zoom更全面,但是不能是负值,只能等比例控制!
  • 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。
    参考实例:zoom-scale.html
    从demo我们看出如下几点差异:
  • zoom的缩放是相对于左上角的;而scale默认是居中缩放。
  • zoom的缩放改变了元素占据的空间大小,影响了其他小伙伴;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化。
  • 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。
  • 然后,还有一个肉眼看不见却更重要的差异,渲染的性能差异明显,在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染,而scale只是在当前的元素上重绘。

至于zoom缩放不是按照中心点缩放的这个兼容性差异,通过使用「海洋布局」实现,具体可参考“IE下zoom或Matrix矩阵滤镜中心点变换实现”一文。
需要注意的是,Chrome等浏览器下,zoom/scale不要同时使用,因为,缩放效果会累加。

你可能感兴趣的:(CSS)