Fe-interview: [css] 第123天 什么是zoom？它有什么作用？
第123天 什么是zoom？它有什么作用？
css
haizhilin2013
All 3 comments
zoom是缩放比例，可以将元素进行缩放。
和css3中的transform:scale() 作用类似.
两者区别在于缩放的参照点不一样，zoom针对元素左上角，scale针对元素正中心
LinStan
on 17 Aug 2019
zoom可以对一个元素设置缩放比例。此属性是IE浏览器的专有属性，Firefox等浏览器不支持。
zoom与tansform:scale()还是有区别的，zoom的缩放基点事左上角，且它是先缩放，然后再计算布局；tansform:scale()缩放的基点在元素正中间，缩放不会影响布局。
Joan428
on 17 Aug 2019
👍5
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。
Konata9
on 19 Aug 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
undefinedYu
·
3Comments
haizhilin2013
·
3Comments
Most helpful comment
zoom可以对一个元素设置缩放比例。此属性是IE浏览器的专有属性，Firefox等浏览器不支持。zoom与tansform:scale()还是有区别的，zoom的缩放基点事左上角，且它是先缩放，然后再计算布局；tansform:scale()缩放的基点在元素正中间，缩放不会影响布局。