摘要 今天小编跟大家讲解下有关CSS中zoom和scale的差异 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中zoom和scale的差异

今天小编跟大家讲解下有关CSS中zoom和scale的差异 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中zoom和scale的差异 的相关资料，希望小伙伴们看了有所帮助。

先说原理

zoom和scale这两个东西都是用于对元素的缩放 但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角 而scale默认是中间位置 可以通过transform-origin来设置。

另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

例子<style>div { width:300px;height:100px; border:1px solid red; font-size:0px; line-height:100px; margin:10px;}span { display:inline-block; height:80px;width:200px;background:blue; vertical-align:middle; overflow:hidden;}</style>

html

<div> <span style="-webkit-transform:scale(0.5);"></span></div><div> <span style="-webkit-transform-origin:top left;-webkit-transform:scale(0.5);"></span></div><div> <span style="zoom:0.5;"></span></div>效果稍微解释一下

第一个测试中只设置了scale 于是元素以自己的中心为基点做缩放。

第二个测试中不仅设置了scale 还有origin来将缩放的基点设置到左上角 因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高 当它并没有在容器里居中 因为scale是先布局后变换的 变换不会对布局产生影响。

最后一个测试是使用zoom 虽然Firefox上不支持 但这是个很古老的特性了。它和第二个测试的区别是它先缩放 后计算布局。所以在例子中它得到了垂直居中效果。

zoom与scale的区别总结

1、兼容性的差异：zoom为非标准属性 除firefox浏览器已在其他浏览器中得到了良好支持 scale已经是标准属性除IE8-外现代浏览器均能较好的支持；

2、取值差异：zoom的合法值可以为数值、百分比以及normal而scale则只能为数值；

3、缩放中心点差异：zoom缩放中心点为左上角 而scale默认为中心点但可以通过transform-origin进行改变；

4、重绘差异：zoom的缩放改变了元素占据空间的大小会引起整个页面的重绘而scale缩放所占据的原始尺寸不变 只在当前元素进行重绘；

5、渲染计算方法可能有差异：zoom为锐化 而scale为模糊；

6、对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文大小限制；而scale就是纯粹就图形进行比例控制 文字50%原来尺寸；

7、这点应该是与上一条相似 border为1px的时候zoom受限于浏览器最小显示1px；而scale就纯粹进行比例控制 不受限。

来源：爱蒂网