[css] 什么是zoom?它有什么作用?

[css] 什么是zoom?它有什么作用?

zoom 最初是 IE 的私有属性,现在除了 Firefox 之外的浏览器基本都支持 zoom。不过,zoom 依旧不是正式的属性。与之对应的 transform 的 scale 属性是正式的 CSS 属性。

zoom 主要的作用是用于元素或者页面的缩放;transform 的 scale 也有同样的作用,两者有如下的区别。

    zoom 的缩放点在元素左上角。在 Chrome 下,文字如果缩小后小于 12px 的情况仍然会显示 12px。并且 zoom 缩放会影响元素实际的位置,这样就会造成页面的重排和重绘,在性能上会有影响。
    transform 的 scale 缩放点在元素中心。缩放会对文字有影响,可以利用此属性实现 Chrome 下小于 12px 的字体。但是 transform 缩放后不会改变元素的位置,即如果元素原来是 200px 宽,缩小 50% 后虽然看上去只有 100px 宽了,但是仍然占 200px。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

你可能感兴趣的:([css] 什么是zoom?它有什么作用?)