如何使用 CSS "zoom" 缩放元素及其布局

You probably know that you can use the scale function scale() or even just scale property to transform and change an element's size.

你可能知道可以使用 scale 函数 scale() 甚至只是 scale 属性 来变换并改变元素的大小。

The thing with scale is that it only changes visual appearance and the layout size of the target element remains the same.

scale 的问题是，它只改变视觉外观，而目标元素的布局大小保持不变。

Today I learned there's also the zoom property. zoom "really" scales the element and its layout. Check this out!

今天我了解到还有 zoom 属性。zoom “真正”地缩放元素及其布局。来看看吧！

What's the browser support?

浏览器支持情况如何？

It's pretty green!

支持度相当不错！

I can totally see constrained situations where this can come in handy, but you should avoid animating it because browsers probably don't appreciate the layout shift.

我完全能想象到在受限情况下这会派上用场，但你应该避免对其进行动画，因为浏览器可能不喜欢布局变化。