其实关于scale，我之前是用他来搞一些css3的特效的放大缩小啊，玩的也挺6666，而*zoom：1之前是用来做css的hack，也就是触发IE6/7的haslayout清除浮动的。终于某天，好事的UE说1px的线在retina的屏幕下显得膀大腰圆要我们修复这个bug。参考 http://www.tuicool.com/articles/ZRv6bun，在做了一系列的实验之后采取了使用scale的方案，顺便验证了android真的不支持0.5px这个理论。

本来用着scale的这个解决方案还蛮好，只是后来为了解决一些奇葩的布局问题发现这个zoom,scale其实有点料可挖的。

一、分别讲下scale与zoom

我们先看一下scale,scale是隶属于transform的2d转换的王牌军，IE9+、firefox、opera、safari、chrome基本现代浏览器都支持。scale同时支持scaleX,scaleY以及scale，默认是从左上角开始缩放且scale的取值可以为负值，当scale的值为负值scale相对于右下角进行缩放。但是scale只支持数值，normal、百分比均为无效值。最重要的是scale并不会引起整个页面的重绘，因为scale在生效的时候该元素本身的大小是没有发生变化的，只是在当前元素上进行重绘。

我们看一段测试代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>scale测试</title>

     <style>

         .s1, .s2 {

             height: 200px;

             width: 200px;

             background-color: #d0d0d0;

         }

         .s3 {

             float: left;

             height: 80px;

             width: 80px;

             border: 1px solid #000;

             font-size: 12px;

         }

         .s1 .s3 {

             transform: scale(.5);

             tranform-origin: 0 0;

             background-color: yellow;

         }

        .s2 .s3 {

            background-color: pink;

        }

     </style>

 </head>

 <body>

 <div class="s1">

     <div class="s3">我是小小鸟</div>

     <div class="s3">rtrtrt</div>

 </div>

 <div class="s2">

     <div class="s3">我是小小鸟</div>

     <div class="s3">rtrtrt</div>

 </div>

 </body>

 </html>

　　

由代码和效果图可知，scale虽然能在当前元素进行重绘，但实际上该元素所占的空间是没有发生变化的。但是包括border在内的所有属性确实是被缩放了，下面我们再看下zoom。

把上面的代码.s1 .s3改成如下：

 .s1 .s3 {

            zoom: .5;

            background-color: yellow;

        }

　　

我们可以看见改成zoom的时候，不仅是被zoom的元素发生了重绘，页面中其他元素也发生了重绘从而导致了页面整个布局的改变且zoom缩放就是相对于左上角而scale默认则是居中缩放。还有一点是zoom对元素的border-width和font-size看起来并没有效果。

zoom可以支持的值类型有百分比值，数值和normal关键字，但是需要注意虽然Chrome/Sarari支持zoom属性，但其实zoom并不是标准属性

二、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就纯粹进行比例控制，不受限。

三、总结&鸣谢

综上，想改变移动端1px在retina屏看起来较粗的问题还得使用scale,scale突破了浏览器的最小显示限制，让你自由飞翔。

感谢张鑫旭大大的博文，地址如下 http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 是我参考的重要来源，对元素渲染计算方法的差异如果不是张鑫旭大大的博文我自己是没有注意的。

以上，如有错误欢迎指出~

关于scale和zoom的区别的更多相关文章

  1. scale 和 zoom，以及zoom的一些变态用法

    zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...

  2. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

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

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

  4. zoom与scale的异同

    zoom与scale的异同点 作为一名前端,尤其是页面要兼容ie浏览器的前端,肯定对着两个属性都很熟悉. zoom和scale都是css中常用的放大和缩小一个元素的方法,在scale还没有成为css3 ...

  5. D3js-绘制地图时出现过小, 设置scale还是无效 的解决方法

    使用d3绘制某个地市的地图时,把scale成非常大但是还是无法达到想要的效果. //---------------------------------------------------------- ...

  6. 谈谈关于CSS中transform属性之scale

    谈谈关于scale属性 scale是什么? 根据W3C定义 ,scale主要是进行缩放和转化: scale能做什么? 1.1px细线 <div class="wrap"> ...

  7. 微信小程序-修改单选框和复选框大小的方法

    方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...

  8. SDK截图程序（二）：保存截图

    怎样将我们上一篇截取的位图保存在文件夹里.根据MSDN,思路是这样的,用CreateFile函数在磁盘建立一个bmp文件,用WriteFile填充该bmp文件的文件头.信息头,像素等信息.之前我们只有 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程（十三）：地图相关接口说明

    为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...

随机推荐

  1. Javascript权威指南学习笔记

    第二章:词法结构 ;function a(){alert(2)};//前面的分号保证正确地语句解析 第三章:类型.值和变量 基本概念: 1.数据类型---能够表示并操作的值的类型叫做数据类型. 2.变 ...

  2. Reverse Integer LeetCode Java

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 public cl ...

  3. POJ 2226二分图最大匹配

    匈牙利算法是由匈牙利数学家Edmonds于1965年提出,因而得名.匈牙利算法是基于Hall定理中充分性证明的思想,它是二部图匹配最常见的算法,该算法的核心就是寻找增广路径,它是一种用增广路径求二分图 ...

  4. 使用 Git Hooks 实现自动项目部署

    最近在某服务器上面搭建 git 开发和部署环境,git 开发环境很简单,按照 ProGit 一书的相关知识就可以轻松搞定,实现了类似 Github 的使用 SSH + 私有 Clone 的方式. 关于 ...

  5. RSA非对称性前端加密后端解密

    前端加密代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  6. 文件描述符、文件表项指针、inode节点的关系

    内核使用3种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对另一个进程的影响. (1) 每个进程在进程表中都有一个纪录项,纪录项中包含一张打开文件描述符表,每个文件描述符各占一项, ...

  7. Photoshop 裁剪图片

    如图1选择裁剪工具,然后如图2点一下clear,就可以根据鼠标裁剪任意大小的图片

  8. 解决VMware虚拟机宿主机与虚拟机通讯慢

    本地连接--> 属性 --> 配置(C) -->高级 页面的属性框中找到"Large Send Offload"(中文名称叫:大量传送减负)==>Disab ...

  9. Web网站的几个并发量级

    评价一个网站的“大小”,处于视角的不同,有很多种衡量的方法,类似文章数,页面数之类的数据非常明显,也没有什么可以争议的.但对于并发来说,争议非常之多,这里就从一个技术的角度开始,谈谈几个Web网站的数 ...

  10. ORACLE序列号

    select MAXSYSACCEPT.nextval from dual; (序列号检索 增1)alter sequence MAXSYSACCEPT increment by 1 cache 20 ...