使用zoom/scale实现缩小和放大效果

在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染,而scale只是在当前的元素上重绘。
scale变化时候,其原本的尺寸是不变的,因此没有layout的重计算;但是zoom牵一发动全身


差异:
1、zoom的缩放是相对于左上角的;而scale默认是居中缩放
2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化
3、zoom和scale对元素的渲染计算方法可能有差异(有可能会引起图片失真)
4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制


:zoom和transform scale不要同时使用,因为缩放效果会叠加

你可能感兴趣的:(前端)