定义
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的取值只能是数值，但是可以为负数。
实际应用
先来看一个简单的demo
兼容问题
从demo中可以看出zoom缩放是相对于左上角的，而scale默认是相对于元素的中心点缩放的，scale可以通过设置transform-origin来改变缩放的相对位置，当设置transform-origin: 0 0时，scale缩放可以达到和zoom缩放相似的结果。
前面提到缩放可以应用于移动端各种不同宽度的屏幕的适配上，那么我们就来看看zoom缩放和scale缩放在屏幕适配上的具体差异。下图从左到右分别是：无缩放在iPhone5上的表现，zoom:1.17在iPhone6上的表现，transform:scale(1.17)在iPhone6上的表现。
代码如下：
HTML
查看更多关于zoom和transform:scale()的区别_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111540