小tips：zoom和transform：scale的区别 00 张鑫旭

zoom和transform:scale()的区别

zoom和transform:scale()都可以用于缩放，目前移动端存在各种各样不同屏幕大小的手机，为了兼容不同宽度的屏幕，我们可以基于某一屏幕宽度大小（比如iPhone5的320，这个根据设计稿来）做出页面后，再对页面进行缩放以兼容其他屏幕宽度。

定义

zoom和transform:scale()具体有什么区别呢？先来看看官方的定义：

Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.

zoom相当于是一个放大镜，缩放被zoom的元素不会影响初始或实际视口的大小。

zoom的取值可以为数值和百分比值，不能取负值。

A transformation is applied to the coordinate system an element renders in through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices.

先来看看transform的定义，transform的值是基于坐标系统的，transform的变换过程实际上是矩阵变换的过程，被transform的元素要经过一系列的矩阵运算最终确定其坐标。

The value of the transform property is a list of transform-function...specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first.

scale()是transform的一个属性值，这是一个缩放函数。当一个元素被定义了transform:scale(x,y)，可以控制其x方向和y方向上的缩放比例，如果只有一个参数，那么第二个参数与第一个参数相等。

scale的取值只能是数值，但是可以为负数。