页面缩放之zoom和transform:scale的比较

·  阅读 4659

之前在做一个活动的管理后台,有一个功能需要在修改活动编辑时,左侧有一个缩小的预览图进行相对应的同步,右侧的面板是可以自由拉升的,也就是长度不固定。 如图所示。

第一个想到的方案,就是用css3的transform:scale来进行实现。比如左右两侧都渲染相同页面,将左侧预览图的渲染缩小到0.3倍,也就是 scale(.3)

当使用transform:scale(.3)时,你会发觉,虽然左边的预览图缩小到了0.3倍,但是它占据的空间和右边的大图是一样的。

此时对于左侧预览图,你可以用margin负值将它的空间进行变小。由于我们的左侧和右侧是联动的,当我调整右边大图的高度时,预览图的高度也会跟着变化,导致预览图的顶部不固定

google了一下,发觉zoom也可以进行页面的缩放,但是跟transform:scale有点区别,因为此文就是对比两者之间的一个差异

zoom

我们最开始接触zoom应该是在兼容IE6、IE7的年代,比如*zoom: 1,可以用来清除IE6/7诡异的浮动问题

目前,这个属性除了FireFox,chrome和移动浏览器已经得到了很好的运用,除了处理IE的兼容性外,它可以用来对页面进行缩放

它的取值可以为:

百分比值:如,zoom:50%,表示缩小到原来的一半

数值:zoom:0.5,表示缩小到原来的一半

normal:zoom:normal等同于zoom:1

注意点:zoom的取值不能为负数

transform:scale

tranform:scale,IE9+以及其他主流浏览器都支持,取值为transform: scale(<x> [<y>]), 或者可以用transform:scaleX()transform:scaleY()来单独对x轴或者y进行缩放。此外,里面的数值可以为负数,当为负数时,页面整个倒过来了,类似transform: rotate(180deg);的效果,如图所示

两者比较

相同点

可以对页面缩放

不同点

a. 兼容性方面:

zoom可用于所有IE、chrome、手机浏览器

scale在IE9+都可兼容

b. 取值方面

scale可以只控制一个方向的缩放,比如X轴,并且可以为负数,zoom则不行

c. 缩放效果

zoom相对于页面左上角缩放,它可以改变元素缩放后所占据的空间,比如100*100的页面,缩小一倍后,占据的空间为50*50

zoom缩放后的最小字号为12像素,也就是说,即使你把页面做小了100倍,字体最小也会是12px,也由于这个原因,会影响页面缩放后的布局错乱,会导致缩放后的页面进行重新渲染。以掘金为例,用zoom缩小到0.3倍的时候,是下面这样的效果

scale的缩放相对于页面居中缩放,它不会改变元素所占据的空间,也即是说,100*100的页面,缩小一倍后,占据的空间,还是为100*100。还是以掘金为例,红色框中的li已经缩放到0.3倍,可是它占据的空间还是没变,还是为空色框部分

scale的文字可以等比缩放,比如你缩小100倍,文字也会缩小100倍,它相当于页面的整体缩放,因此不会导致布局的变化,页面也不会重新渲染

在chrome浏览器下,scale和zoom一起使用,会是效果达到一个叠加,也就是说,放大1倍,实际效果就是2倍

总结

正常的页面缩放,我们还是使用 transform:scale就好了,缩放效果好,也没有性能问题。对于我所遇到的问题,最后的解决方案是使用transform:scale进行缩放,把左边预览图的高度写死,然后通过margin负值的方式解决。

本文算是一个知识的探讨,深究原因,多学习


后记

小弟自己运营了一个前端小站,每周一、三、五更新几篇精华技术文章,欢迎来访: xianyulaodi.github.io/fed-sites/

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改