zoom属性的研究

最新推荐文章于 2023-08-11 11:54:30 发布

suyang119

最新推荐文章于 2023-08-11 11:54:30 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/suyang119/article/details/84436083

html 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了浏览器zoom属性的基础用法及兼容性，包括其在不同浏览器中的表现和用途，如触发IE67的hasLayout特性。同时对比了Firefox、Opera等浏览器中实现缩放效果的CSS3 scale方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自 : http://www.smallni.com/zoom-property/

最近在研究浏览器的zoom属性，无奈想找一点参考资料，百度谷歌一搜，出来的都是NIKE的zoom系列运动鞋，这个属性一般不为人知，甚至有些CSS手册中都查询不到。 – -#

因为这个属性最初是由 IE 浏览器制定的，无奈只能去翻MSDN的内容，一点一点的英文参阅，再参照国内一些大牛的提及，最后加上本人的一些理解和延伸阅读来写下这篇文章。希望大家不仅仅是停留在IE6 7下用zoom:1;触发hasLayout的知识程度上。

OK,先来看基础用法及兼容性吧：

 
         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);

转自 : http://www.smallni.com/zoom-property/