zoukankan      html  css  js  c++  java
  • CSS中zoom和scale的区别

    一、zoom几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了

    zoom的字面意思是“变焦”,摄影的时候常用到的一个概念。对于web上的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(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。

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

    三、区别先总结的差异:

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

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

    然而,更深层次的差异才是更重要的。

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

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

    3. zoom和scale对元素的渲染计算方法可能有差异。

  • 相关阅读:
    MySql.Data.dll的版本
    发现一个“佛系记账本”
    坚果云无法同步SVN文件夹
    Kali Linux打开多个终端窗口
    修改Kali Linux终端主题
    Kali Linux搜索软件包
    指定无线网卡监听信道
    解决Aireplay-ng信道问题
    查看干扰进程
    使用Kali官网提供的虚拟机系统
  • 原文地址:https://www.cnblogs.com/hwldyz/p/9269021.html
Copyright © 2011-2022 走看看