“缩放”在CSS中有什么作用？

Question

我发现一些jQuery插件，在他们的css规则中使用'zoom'描述符，我甚至查看w3c网站，发现它用于放大，但我怎么能实际实现呢？或者我必须定义一些视口？我该如何定义这样的视口？或者我对整个事情都错了？

可以像

一样使用它

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

Answer 1

缩放不包含在CSS规范中，但在IE，Safari 4，Chrome中受支持（自3.5以来，您可以在Firefox中使用-moz-transform: scale(x)获得类似的效果）。请参阅here。

所以，所有浏览器

 zoom: 2;
 zoom: 200%;

将你的对象缩放2，所以就像加倍大小一样。这意味着如果你有

a:hover {
   zoom: 2;
}

在悬停时，<a>标记会缩放200％。

就像我说的，在FireFox 3.5+使用-moz-transform: scale(x)时，它做了很多相同的事情。

修改：在回复thirtydot的评论时，我会说scale()不是完全替代。它不像zoom那样在线扩展，而是扩展开箱即用，而不是强制推出其他内容。在行动here中查看此内容。此外，Opera似乎不支持zoom。

This帖子提供了解决与scale不兼容的方法以及使用jQuery解决此问题的方法的有用见解。

Answer 2

感到惊讶的是，没有人提到zoom: 1;对IE6-7非常有用，可以通过触发hasLayout来解决大多数仅IE错误。

Answer 3

此属性控制当前元素的放大级别。元素的渲染效果是相机上的“缩放”功能。即使此属性未被继承，它仍然会影响子元素的呈现。

实施例

 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

用于缩放整个视口（'screen'）。 它也恰好在很多浏览器中缩放个人元素，但不是全部。 css3指定transform：scale应该用于实现这样的效果：

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

但它在支持它的那些浏览器中与'element zoom'有点不同。

Answer 5

只有IE和WebKit支持缩放，是的，理论上它完全符合你所说的。

在图像上试一试，看看效果如何：）

Answer 6

现在广泛支持CSS zoom属性＆gt;浏览器总人数的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中不支持缩放功能，但您只需修复此功能，如下所示：

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