转自 : http://www.smallni.com/zoom-property/
最近在研究浏览器的zoom属性,无奈想找一点参考资料,百度谷歌一搜,出来的都是NIKE的zoom系列运动鞋,这个属性一般不为人知,甚至有些CSS手册中都查询不到。 – -#
因为这个属性最初是由 IE 浏览器制定的,无奈只能去翻MSDN的内容,一点一点的英文参阅,再参照国内一些大牛的提及,最后加上本人的一些理解和延伸阅读来写下这篇文章。希望大家不仅仅是停留在IE6 7下用zoom:1;触发hasLayout的知识程度上。
OK,先来看基础用法及兼容性吧:
1
|
zoom: { number(数字) | percentage(百分比) | normal } ;
|
Inherited继承性 | 默认值Initial | 版本Version |
否 | normal | CSSN/A |
IE | firefox | opera | safari\chrome |
ALL | 不支持 | 不支持 | 最新版的支持(safari4+\chrome4+) |
zoom可以设置或检索对象的缩放比例,其实说白了就是可以对所设置zoom值的元素进行缩放。zoom属性的值并不会继承,但它会影响到它的子元素,子元素会随着父元素一起放大或缩小。
zoom的值即代表可以放大或缩小的倍数,支持三种类型,分别是:数字、百分比、normal,所有元素默认的zoom值为normal(即使没有申明)
- 数字:无符号浮点实数,即只有正值才会起作用,如果值为1,即刚好不缩放
- 百分比:当100%时即相当于设定了数字为1,也是刚好不缩放,如果设置为120%时,即等于将元素放大1.2倍。
- 默认值normal,不设置时默认值为normal(相当于数字为1和百分比100%时的没有缩放,但要记住这只是外观,并没有申明zoom的值。如果一旦申明了,除了normal以外的其他值都是可以触发hasLayout的)
Zoom属性刚开始是IE浏览器的专有属性,Firefox、opera以及较早版本的webkit核心的浏览器并不支持。不过现在已经被逐步标准化,现在已经出现在 CSS 3.0 规范草案中,现行的 CSS 2.1 规范中不存在。详细资料请参考 MSDN 说明 : -ms-zoom Attribute | zoom Property 以及 CSS 3.0 规范草案:7.1. Properties from CSS 。
最新版本的webkit也开始支持它了,而且使用值reset,webkit可以实现不错的效果(有趣的是,IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset,页面上的其它元素在用户放大页面的时候都会跟着放大。
注:其实,我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果,不同的是,设置该属性的元素内的文字不会被放大/缩小,但是页面上的其它元素则会变化—神飞
(附上DEMO地址:htpp://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/zoom.htm 请用最新版的chrome\safari或者IE打开查看,不支持firefox和opera)
也许正是因为微软在浏览器革新上的不给力和跟W3C格格不入的状态导致了IE上各种奇怪的问题,这样就导致了它还有其他一些小作用,比如触发ie6 7的hasLayout属性(这个在我之前的文章《 hasLayout && Block Formatting Contexts》有详细讲解过)。
我们可以想象一下,一旦设置了zoom的值之后,所设置的元素就会缩放,那么宽高肯定是重新计算了,这里一旦改变zoom值时其实也会发生重新渲染(repaint),是否发生reflow,还需要各位大牛测试,本人暂时还不能测出。
zoom的本意就是缩放,当初微软发明这个属性的时候也是为了让元素能够缩放,但目前火狐、opera浏览器并不支持这个属性,那么这些浏览器用什么来缩放呢?
答案是CSS3
scale(<number>[, <number>]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D 缩放。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素 的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示 X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5);
相关推荐
zoom 属性语法:zoom:normal | <number> | 默认值:normal适用于:所有元素继承性:有取值:normal:使用对象的实际尺寸。<number>:用浮点数来定义缩放比例。不允许负值<percentage>:用百分比来定义缩放比例。不...
今天被问起CSS中有个zoom属性是干什么用的,虽然我知道这个属性是用来清除浮动,来触发haslayout的。但具体的定义还不是很了解,就百度了一点关于zoom属性的资料,然后总结了一下。 CSS zoom属性 zoom:设置或检索...
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 Zoom的使用方法: ...
1、Zoomit v4.5是目前最新版。 2、Zoomit v4.5中文汉化绿色版 3、Zoomit v4.5在win8 64位系统中完美运行 4、软件介绍: 可以教师在讲课时候用!!非常有用!!ZoomIt是一款非常实用的一个超级好用的投影演示辅助工具...
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 因为Zoom属性是IE浏览器...
Zoom 是现代企业视频通讯领导者,提供简捷可靠的云平台,帮助企业在移动设备、电脑和会议室系统上轻松进行视频和音频会议、聊天以及网络研讨会。作为一款基于软件的原创会议室解决方案,Zoom Rooms 在全球范围内被...
ZOOM安装包
Zoom 远程会议, Zoom 远程会议 Zoom 远程会议 Zoom 远程会议 Zoom 远程会议
Zoom是一款多人手机云视频会议软件,为用户提供兼备高清视频会议与移动网络会议功能的免费云视频童话服务。Zoom致力于帮助广大企业和组织打造无障碍的沟通环境,提高工作效率。视频、语音、内容共享和聊天云平台上手...
设定相应快捷键(默认为ctrl+1/2/3)当您第一次运行ZoomIt,它将弹出一个配置对话框,描述ZoomIt能做什么,让你指定热键来更方便的进入缩放或标注功能,而且还能够自定义绘图笔的颜色和大小。例如,我可以用标注功能...
cloud-zoom.jscloud-zoom.jscloud-zoom.jscloud-zoom.js
zoom安装文件,zoom安装文件,zoom安装文件,zoom安装文件
zoom是一款用于企业、社会组织进行视频会议的软件,提供便捷的操作。
Zoom5.5.2版本
Cloud Zoom is a popular fly-out jQuery image zoom plugin.jQuery图像缩放插件
ZOOM G3X箱头说明
Hover Zoom
camera2_对焦与zoom
ZoomIt包含32位平台和64位平台 无需安装即可使用。ZoomIt教学中常用的放大缩小工具。