zoom和transform:scale()都可以用来缩放。目前,移动终端上有各种不同屏幕尺寸的手机。为了兼容不同宽度的屏幕,我们可以使用一定的屏幕宽度大小(比如iPhone5为320,这是根据设计稿)制作页面后,缩放页面以兼容其他屏幕宽度。定义zoom和transform:scale()有什么区别?先看看官方的定义:指定窗口或查看区域的初始缩放系数。这是放大镜类型的缩放。从初始缩放因子交互更改缩放因子不会影响初始或实际视口的大小。缩放相当于放大镜,缩放缩放元素不会影响初始或实际视口大小。zoom的值可以是数值或百分比值,不能为负值。通过transform属性将变换应用于元素呈现的坐标系。此属性包含转换函数列表。坐标系的最终变换值是通过将列表中的每个函数转换为其对应的矩阵(如变换函数的数学描述中定义的),然后将矩阵相乘而获得的。我们先来看看transform的定义。transform的取值是基于坐标系的。transform的变换过程其实就是矩阵变换的过程。变换后的元素要经过一系列的矩阵运算,最终确定它的坐标。transform属性的值是transform-function的列表...通过2个参数描述的[sx,sy]缩放向量指定2D缩放操作。如果不提供第二个参数,则取一个等于的值first.scale()是transform的一个属性值,是一个缩放函数。当用transform:scale(x,y)定义元素时,可以控制其在x和y方向上的缩放。如果只有一个参数,则第二个参数等于第一个参数。scale的值只能是数值,但可以为负数。实际应用先来看一个简单的demo兼容性问题。从demo中我们可以看到,缩放缩放是相对于左上角的,缩放默认是相对于元素的中心点缩放的。缩放可以通过设置transform-origin相对位置来改变,当设置transform-origin:00时,缩放缩放可以达到和缩放缩放类似的效果。前面提到了缩放可以应用于移动端不同宽度屏幕的适配,那么我们来看看缩放和缩放在屏幕适配上的具体区别。下图从左到右依次为:iPhone5上没有zoom的表现、zoom:1.17在iPhone6上的表现、transform:scale(1.17)在iPhone6上的表现。代码如下:HTML
