当前位置: 首页 > Web前端 > CSS

zoom和transform-scale()的区别

时间:2023-03-31 12:28:56 CSS

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

CSShtml,body{height:100%;}.container{height:100%;}.box{height:160px;字体大小:20px;text-align:center;}.red{background-color:rgba(255,0,0,.5);}.blue{background-color:rgba(0,0,255,.5);}的宽高外层容器100%,占据整个屏幕。因为zoom是作用于body下面占据整个屏幕的容器,根据定义我们可以说这里使用zoom实际上是对整个屏幕(即viewport)进行了缩放,其实和页面上的放大是一样的在浏览器中效果是一样的:那么为什么刻度会有滚动条呢?根据transform的定义,transform的变换过程是基于坐标系的,也就是说缩放前外层容器的四个角的坐标分别为(0,0),(100%,0),(0,100%),(100%,100%),以(0,0)为变换中心缩放后,四个角的坐标变为(0,0),(117%,0),(117%,0),(117%,117%),超出视口本身的大小,所以出现滚动条。看来兼容的时候应该用zoom啊!一开始我也是这么想的,但是后来同事指出缩放问题有一个解决方法:那就是给外层容器,也就是要缩放的元素设置一个固定的宽高。注意不是百分比,是绝对值!比如设计稿是根据iPhone5的屏幕尺寸做的,那么就设置width:320px;高度:504px;对于外容器,设置后使用scale时不会出现滚动条。当然,使用缩放也有同样的效果。渲染从上面的demo中也可以看出,通过js获取缩放后的元素的宽高仍然是缩放前的原始宽高。但是,在查看元素时缩放和缩放还是有区别的:缩放有点奇怪,戳demo,当元素的宽度没有明确设置(即默认为100%)或者设置为apercentage,用zoom缩小元素后元素的宽度比原来大了!大的!向上!如果放大了,宽度会比原来的小!小的!所以,如果想获取元素缩放后的宽高,使用zoom似乎比较麻烦。缩放比较简单,只要js得到的宽高*缩放的倍数就是缩放后元素的实际宽高即可。另外,缩放对性能不友好,会影响页面中的其他元素。向文档流中的任何元素添加缩放都会导致整个页面重新呈现。从最初的demo可以看出,缩放元素的父元素高度明显变小了。而scale只是在当前元素上重绘,不会影响其他元素。其他的,如果被缩放的元素的宽高是rem单位,那么缩放效果在该元素上是无效的,除了非rem单位的文本或者子元素,缩放表现正常。请在此处查看演示。所以,是用zoom还是scale,还是要具体情况具体分析。