zoom与scale的区别

zoom与scale的区别

最近做了两个项目,一个需要对字体缩小,小于默认的字体大小(12px),最后使用transform:scale(0.9),但整个元素宽高都被缩小了,感觉很不好~~~做另外一个项目要求将整体页面安一定比例缩小,最初使用了scale,缩小是达到了,但页面位置已经不晓得跑哪去了,于是改用zoom,看着舒服多了,于是我就想用zoom缩放字体,😑但是没有用,两者都是缩放,那区别和特点是什么呢?我整理了一下几点。

一:zoom的兼容性

在以前,zoom:1可以给IE6、IE7浏览器增加haslayout,用来清除浮动

支持的类型:

百分比值:zoom:50%,表示缩小到原来的一半。

数值:zoom:0.5,表示缩小到原来的一半。

normal关键字:zoom:normal等同于zoom:1.

注意,虽然Chrome/Safari浏览器支持了zoom属性,但是,其实zoom并不是标准属性。

二:css3 transform下的scale

而transform下的scale就不一样了,是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为:transform: scale( []). 同时有scaleX, scaleY专门的x, y方向的控制。

和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。而且,还能是负数,没错,负数。而zoom不能是负值!

三:scale与zoom之间的差异

浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。

控制缩放的值不一样。zoom更全面,但是不能是负数,只能等比例控制;而scale虽然只能是数值,但是能负数,可以只控制1个维度。

zoom的缩放是相对于左上角的;而scale默认是居中缩放;

zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;

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

🎎 相关推荐

王者荣耀怎么快速获取韩信 王者荣耀
🎯 365bet电脑网站

王者荣耀怎么快速获取韩信 王者荣耀

📅 09-05 👀 7106
苹果无法关机怎么办
🎯 5443655

苹果无法关机怎么办

📅 07-05 👀 7770
线上推广渠道全解析及其实施方法
🎯 5443655

线上推广渠道全解析及其实施方法

📅 08-09 👀 9903