zoom和transform:scale的区别

zoom简介

在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。
其支持的值类型有：
百分比值：zoom:50%，表示缩小到原来的一半。
数值：zoom:0.5，表示缩小到原来的一半。
normal关键字：zoom:normal等同于zoom:1.

区别

虽然Chrome/Safari浏览器支持了zoom属性,但是zoom并不是标准属性,transform下的scale就不一样了，是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为：transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制。
和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。不过能是负数，可以只控制1个维度。而zoom更全面，但是不能是负值，只能等比例控制！
浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。
参考实例：zoom-scale.html
从demo我们看出如下几点差异：
zoom的缩放是相对于左上角的；而scale默认是居中缩放。
zoom的缩放改变了元素占据的空间大小,影响了其他小伙伴；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化。
对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
然后，还有一个肉眼看不见却更重要的差异，渲染的性能差异明显,在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。

至于zoom缩放不是按照中心点缩放的这个兼容性差异，通过使用「海洋布局」实现，具体可参考“IE下zoom或Matrix矩阵滤镜中心点变换实现”一文。
需要注意的是，Chrome等浏览器下，zoom/scale不要同时使用，因为，缩放效果会累加。

zoom和transform:scale的区别相关推荐

zoom和transform:scale()的区别
文章目录 1. 兼容行区别 2. 控制缩放的属性值不一样 3. zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置 4. 对文字的缩放规则不一 ...
CSS中zoom和transform:scale的区别
原文地址:http://www.cnblogs.com/foodoir/p/5821018.html 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inli ...
html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性语法: zoom:normal ...
zoom与scale的区别
最近做了两个项目,一个需要对字体缩小,小于默认的字体大小(12px),最后使用transform:scale(0.9),但整个元素宽高都被缩小了,感觉很不好~~~做另外一个项目要求将整体页面安一定比例 ...
vue 组件拖拽和缩放，支持在容器为transform:scale和zoom情况下的正常显示
自己造轮子好累, 起因是用别人的封装组件时发现在父容器缩放(transform:scale.zoom)情况下需要拖拽缩放的组件的鼠标位置有偏移,看文档看源码找不到自定义缩放比例的地方,痛苦. 实现效果 ...
transform: scale(x,y)
作用: 1)缩放 2)反转水平翻转:transform: scale(-1,1); 垂直翻转:transform: scale(1,-1); 水平垂直翻转: transform: scale(-1, ...
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <d ...
SWT里Slider和Scale的区别
以前以为Slider和Scale之间只是外观的区别,今天发现不是这样的,因为Slider有一个特点:getSelection()能得到的最大值并不是getMaximum()的值,要减去getThum ...
transform:scale实现大屏自适应
小结一波~ 前言大屏使用rem 耗时而且对浏览器最小字体不支持,使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放一.使用步骤 1.在src文件下的u ...

zoom和transform:scale的区别

zoom简介

区别

zoom和transform:scale的区别相关推荐

最新文章

热门文章