页面缩放之zoom和transform:scale的比较 | 您所在的位置:网站首页 › 缩放是什么功能 › 页面缩放之zoom和transform:scale的比较 |
之前在做一个活动的管理后台,有一个功能需要在修改活动编辑时,左侧有一个缩小的预览图进行相对应的同步,右侧的面板是可以自由拉升的,也就是长度不固定。 如图所示。 第一个想到的方案,就是用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:scaletranform:scale,IE9+以及其他主流浏览器都支持,取值为transform: scale( []), 或者可以用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/ |
CopyRight 2018-2019 实验室设备网 版权所有 |