CSS中的“缩放”功能是什么?

前端之家收集整理的这篇文章主要介绍了CSS中的“缩放”功能是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现一些jQuery插件,在他们的css规则使用’缩放’描述符,我甚至看看w3c网站,发现它是用于放大,但我怎么实际实现呢?还是我要定义一些视口?我如何定义这样的视口?或者我错了整个东西?

是可能使用它像

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

解决方法

缩放不包括在CSS规范中,但它支持在IE,Safari 4,Chrome(和你可以得到一个类似的效果在Firefox使用-moz-transform:scale(x)自3.5)。见 here

所以,所有的浏览器

zoom: 2;
 zoom: 200%;

将放大你的对象由2,所以它就像加倍的大小。这意味着如果你有

a:hover {
   zoom: 2;
}

悬停时,< a>标签将放大200%。

像我说的,在FireFox 3.5使用-moz-transform:scale(x),它做同样的事情。

编辑:响应来自三十点的评论,我会说scale()不是一个完全替代。它不像放大一样在线放大,而是扩展开箱和内容,而不是强制其他内容。看到这在行动here.此外,Opera似乎不支持缩放。

This的帖子提供了一个有用的洞察力,解决使用jQuery解决规模和解决方法的不兼容。

猜你在找的CSS相关文章