CSS中zoom和scale的差异基础入门_区别使用说明

先说原理zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。例子
div {width:300px;height:100px;border

CSS中zoom和scale的差异基础入门

先说原理

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

CSS中zoom和scale的差异基础入门_区别使用说明

另外他们执行的渲染顺序也不同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>

效果

CSS中zoom和scale的差异基础入门_区别使用说明

稍微解释一下

第一个测试中只设置了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就纯粹进行比例控制,不受限。 

海计划公众号
(0)
上一篇 2020/03/22 08:49
下一篇 2020/03/22 08:49

您可能感兴趣的内容