css 中 zoom和transform:scale的区别(转载)
一、IE和Chrome等浏览器与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
并不是标准属性。
二、CSS3 transform下的scale
而transform
下的scale
就不一样了,是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为:transform: scale(<x> [<y>])
. 同时有scaleX
, scaleY
专门的x
, y
方向的控制。
和zoom
不同,scale
并不支持百分比值和normal
关键字,只能是数值。而且,还能是负数,没错,负数。而zoom
不能是负值!
三、zoom和scale更深层次的差异
先总结下上面表面所见的差异:
- 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。
- 控制缩放的值不一样。
zoom
更全面,但是不能是负数,只能等比例控制;而scale
虽然只能是数值,但是能负数,可以只控制1个维度。
然而,更深层次的差异才是更重要的。
您可以狠狠地点击这里:zoom和scale对比demo
从demo我们看出如下几点差异:
- zoom的缩放是相对于左上角的;而scale默认是居中缩放;
- zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
- zoom和scale对元素的渲染计算方法可能有差异(如下截图示意)。
- 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。
然后,还有一个肉眼看不见却更重要的差异,渲染的性能差异明显。
由于zoom的缩放会改变元素的真实空间大小,换句话说,实时影响了其他小伙伴。
在文档流中zoom
加在任意一个元素上都会引起一整个页面的重新渲染,而scale
只是在当前的元素上重绘。这其实很好理解,对吧。scale呢变化时候,其原本的尺寸是不变的,因此,就没有layout的重计算;但是zoom
牵一发动全身,就麻烦地多!
这就让我们要斟酌下移动端一些功能的实现了。
我们要实现元素的缩放效果,可以使用CSS3 animation
, 但是存在这样一种情况,就是元素原本就使用了一些transform
属性进行,此时,再使用scale
进行animation
缩放,就会覆盖原来的值,事情就会变得麻烦。
聪明的小伙伴想到了一个方法,就是使用zoom
做动画。从效果上讲,zoom是可以的;但是,从性能上讲,大家就要掂量掂量了。
四、结束语
在移动端,大家也可以使用zoom
进行一些静态内容的控制,可以避免为了scale
而占有translate
, rotate
, skew
等公用的transform
属性。
需要注意的是,Chrome等浏览器下,zoom/scale
不要同时使用,因为,缩放效果会累加。如下图所示的4倍变小:
本文转自:https://yq.aliyun.com/wenji/367?spm=5176.8246799.0.0.MopRGW
css 中 zoom和transform:scale的区别(转载)的更多相关文章
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- zoom和transform:scale()的区别
zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...
- 2D转换下的zoom和transform:scale的区别
一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...
- zoom与transform:scale的区别
一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...
- zoom,zoom与haslayout的关系,zoom与transform: scale( )的区别
1.zoom:(缩放)
- css中zoom:1以及z-index的作用
一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...
- CSS中zoom:1的作用 ,小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
随机推荐
- 第七节:WebApi与Unity整合进行依赖注入和AOP的实现
一. IOC和DI 1. 通过Nuget引入Unity程序集. PS:[版本:5.8.6] 2. 新建DIFactory类,用来读取Unity的配置文件并创建Unity容器,需要注意的是DIFacto ...
- mysql MHA架构搭建过程
[环境介绍] 系统环境:Red Hat Enterprise Linux 7 + 5.7.18 + MHA version 0.57 系统 IP 主机名 备注 版本 xx系统 192.168.142. ...
- [物理学与PDEs]第4章第3节 一维反应流体力学方程组 3.3 一维反应流体力学方程组的数学结构
一维理想反应流体力学方程组是一阶拟线性双曲组.
- C#获取应用程序路径
string s = Environment.CurrentDirectory; //需添加Forms.DLL s = System.Windows.Forms.Application.Startup ...
- torch.utils.data.DataLoader()中的pin_memory参数
参考链接:http://www.voidcn.com/article/p-fsdktdik-bry.html 该pin_memory参数与锁页内存.不锁页内存以及虚拟内存三个概念有关: 锁页内存理解( ...
- docker镜像的使用及相关
参考网站docker中文网:http://www.docker.org.cn/book/docker/docker-push-image-13.html 1.搜索容器: docker search t ...
- 帆软报表(finereport)单元格中各颜色标识的含义
帆软报表(finereport)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形. 控件:单元格右侧中间的各种矩形. 左父格:单 ...
- 51nod--1174 区间中最大的数 (RMQ)
题目: 1174 区间中最大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j ...
- tensorboard基础使用
github上的tensorboard项目:https://github.com/tensorflow/tensorboard/blob/master/README.md 目录 基础介绍 基本使用 几 ...
- shell生成rsync同步脚本
test #!/bin/bash # # Rsync Install Script # Last Updated # ##### modify by Jinayf ##### ######手动修改以下 ...