一、什么是zoom

  在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢?

  

  它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放。

  在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器。

  zoom的值的类型可以是:

    1.数值:0~1               当数值为0.5时,表示缩小为原来的一半  zoom:0.5;

    2.百分比:0%~100%    当数值为50%时,表示缩小为原来的一半 zoom:50%;

    3.关键字normal:          表示缩小为原来的一半 zoom:normal;

  二、transform:scale

  在css3下的transform:scale是写入css规范里面的属性,从IE9以上版本到其他浏览器都支持。

  语法(仅2D转换):

transform: scale(x,y);
transform: scaleX(x);
transform: scaleY(y);

  首先从这里就可以看出,scale是可以单独控制X轴或Y轴方向上的缩放。

  并且zoom与scale最基本的区别就在于zoom可以使用数值、百分比和关键字normal,而scale只能使用数值,但scale的值可以使用负数!

  三、zoom与transform:scale的具体区别

  当我们给一张图片使用两种方式进行缩放时,他们的区别就很明显了。

  使用transform:scale缩小为原来的一半:  

img{
transform: scale(0.5,0.5);
}

  使用zoom缩小为原来的一半:

img{
zoom: 0.5;
}

  将使用两种方法缩小后的截图放在一起跟原图进行比较:

           原图                                    transform:scale                                zoom

                       

  我们可以看出:

  1.transform:scale是以图片的中心进行缩放,并且图片占据的原始尺寸不变,文字依然在图片下方。

     zoom的方法则是以图片的左上角进行缩放,使图片占据的原始尺寸也跟着改变,文字的位置发生了改变。

  2.transform:scale不会改变布局,而zoom会改变布局。

  3.transform:scale会使图片的渲染变得模糊。

zoom                  transform:scale

    

  4.由上面两张图可以看出如果缩放的元素中有文字,zoom的方法只能使字体缩小到浏览器最小字体12px,而transform:scale则会让文字跟随图片一起缩放。

 

  由于zoom的缩放会改变元素占据空间的大小,从而影响到其他元素的布局,所以在应用的时候就麻烦的多,所以如果考虑到响应式和移动端,就要好好斟酌一下_(:зゝ∠)_

  当然是用zoom来做动画也是可以的~不过还是那句话,注意它会改变布局哦~

  四、总结

  transform:scale和zoom的区别可以总结为以下几点:

  值的类型 兼容性 缩放基点 渲染 原始尺寸 字体
transform:scale 数值(可为负) IE9以上版本以及其他现代浏览器 元素中心 模糊 原始尺寸不变

字体随元素缩放

zoom 数值(不可为负)、百分比、normal 除FireFox以外的所有浏览器 元素左上角 不模糊 原始尺寸一起缩放 字体随元素缩放,但最小只能到达浏览器最小尺寸12px

2D转换下的zoom和transform:scale的区别的更多相关文章

  1. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  2. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  3. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  4. zoom和transform:scale()的区别

    zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...

  5. css 中 zoom和transform:scale的区别(转载)

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

  6. zoom与transform:scale的区别

    一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...

  7. zoom,zoom与haslayout的关系,zoom与transform: scale( )的区别

    1.zoom:(缩放)

  8. zoom和transform scale

    一.zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1 ...

  9. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

随机推荐

  1. pygame

    pip install msgpack-python pip install msgpack 离线安装下载地址 Downloading https://files.pythonhosted.org/p ...

  2. spring boot(一)入门

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  3. Hybrid APP架构设计思路

    通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...

  4. leetcode-algorithms-29 Divide Two Integers

    leetcode-algorithms-29 Divide Two Integers Given two integers dividend and divisor, divide two integ ...

  5. 兼容IE8的video写法

    <video width="100%" height="515px" controls preload> <source src=" ...

  6. 使用navigator.userAgent.toLowerCase()判断移动端类型

    使用navigator.userAgent.toLowerCase()判断移动端类型 判断设备,区分Android,iphone,ipad和其它 var ua = navigator.userAgen ...

  7. 有关String的一些方法的使用

    1.String字符串是引用数据类型. 2.String是常量,如果看到给String进行赋值的情况,是说明将该String的地址进行改变了. 3.String的一些常用的方法 toUpperCase ...

  8. Java 9中新的货币API

    译文出处: Java译站   原文出处:Michael Scharhag JSR 354定义了一套新的Java货币API,计划会在Java 9中正式引入.本文中我们将来看一下它的参考实现:JavaMo ...

  9. php常见问题-foreach和引用造成的问题。

    结论:  foreach($arr as &$v) 类似这样的引用循环, 脚本语言需要注意,再次使用 $v时,他还指向原来的引用.会产生问题. unset($v)可以解除引用. 所以循环引用过 ...

  10. mac navicate破解版汉化

    https://pan.baidu.com/s/1dRoalG8lZ-AMGmZrj8OhpQ 提取密码:e8ad 安装完navicate之后解压zh-Hans.zip 点击Resources文件夹 ...