css-zoom和scale的区别

一、zoom

1、属性值

  • auto根据viewport来既定当前标签的缩放。

  • <number>非负数。1表示没有缩放,大于1表示放大的倍数,小于1亦然。

  • <percentage>非负百分比。以100%为基础进行缩放。


2、兼容性

除了FirefoxOpera Mini


3、规范

草案中


二、区别

  • zoom更全面,但是不能负数,只能等比例控制
  • scale只能数值,但是能负数,可以只控制1个维度


  • zoom的缩放是相对于左上角的
  • scale默认是居中缩放


  • zoom的缩放改变了元素占据的空间大小,页面布局重新计算,有性能问题;
  • scale的缩放占据的原始尺寸不变,页面布局不会发生变化;