什么是“缩放”在CSS中做什么？

我发现一些jQuery插件，在他们的CSS规则中使用“缩放”描述符，我甚至看着W3C网站，发现它被用来放大，但我怎么能真正实现它？ 或者我必须定义一些视口？ 而我该如何定义这样的视口？ 或者我错了整个东西？

是否有可能像使用它

a { zoom:1; } a:hover { zoom:2; } 

Answer 1

缩放不包含在CSS规范中，但在IE，Safari 4，Chrome中都可以支持（在3.5版本中，你可以使用-moz-transform: scale(x)得到与Firefox有点相似的效果）。 看到这里 。

所以，所有的浏览器

  zoom: 2; zoom: 200%; 

会把你的物体缩小2倍，所以就像加大了一样。 这意味着如果你有

 a:hover { zoom: 2; } 

hover时， <a>标签将缩小200％。

就像我说的，在FireFox 3.5+中使用-moz-transform: scale(x) ，它的function也是一样的。

编辑：在回应评论从thirtydot ，我会说scale()不是一个完整的替代。 它不会像zoom一样扩展，而是会扩展出所有内容，而不是强制其他内容。 在这里看到这个行动。 而且，Opera似乎并不支持zoom 。

这篇文章提供了一个有用的见解，以解决使用jQuery的scale和解决方法的不兼容问题。

Answer 2

惊讶的是，没有人提到， zoom: 1; 对于IE6-7是有用的，通过触发hasLayout解决大多数只IE的错误。

Answer 3

该属性控制当前元素的放大级别。 元素的渲染效果是相机上的“缩放”function。 即使这个属性没有被inheritance，它仍然会影响子元素的渲染。

例

  div { zoom: 200% } <div style=”zoom: 200%”>This is x2 text </div> 

Answer 4

zoom是@viewport描述符的css3规范，如此处所述

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

用于缩放整个视口（“屏幕”）。 它也碰巧在很多浏览器中缩放个人元素，但不是全部。 css3指定了transform：scale应该用来达到这样的效果：

http://www.w3.org/TR/css3-transforms/#transform-functions

但是它与那些支持它的浏览器中的“元素缩放”有些不同。

Answer 5

只有IE和WebKit支持缩放，是的，从理论上说，它确实如你所说。

尝试一下图片看看它的全部效果:)

Answer 6

CSS zoom属性现在被广泛支持，占浏览器总量的86％。

请参阅： http : //caniuse.com/#search=zoom

 document.querySelector('#sel-jsz').style.zoom = 4; 

 #sel-001 { zoom: 2.5; } #sel-002 { zoom: 5; } #sel-003 { zoom: 300%; } 

 <div id="sel-000">IMG - Default</div> <div id="sel-001">IMG - 1X</div> <div id="sel-002">IMG - 5X</div> <div id="sel-003">IMG - 3X</div> <div id="sel-jsz">JS Zoom - 4x</div> 

Answer 7

正如Joshua M指出的那样，只有在Firefox中才支持缩放function，但是您可以简单地修复它，如下所示：

 div.zoom { zoom: 2; /* all browsers */ -moz-transform: scale(2); /* Firefox */ }