CSS 非标准 "ZOOM"属性

Question

我有一个带有缩放类的 css 文件:1。

我在浏览器控制台上收到以下错误。

此页面使用非标准的“缩放”属性。相反，您可以将 calc() 或“transform”与“transform-origin: 0 0”一起使用。

如何将属性从缩放转换为变换或计算？
谢谢你

Answer 1

您可以找到描述和推荐 on the MDN web docs :

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

推荐:

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

演示:

div.t1 {
  zoom: 0.5;
}
div.t2 {
  transform:scale(0.5);
  transform-origin: 0 0;
}

<div class="t1">Hello World</div>
<div class="t2">Hello World</div>