CSS非标准"ZOOM"财产 [英] CSS non-standard "ZOOM" property

问题描述

我有一个css文件，该文件具有可缩放的类:1.

I have a css file with a class with zoom: 1.

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

I get the following error on the browser console.

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

This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0".

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

How do you convert the property from zoom to transform or calc? ThankYou

推荐答案

您可以找到描述和建议

You can find a description and recommendation on the MDN web docs:

此功能是非标准功能，不在标准范围内.不要在面向Web的生产站点上使用它:它不适用于每个用户.实现之间也可能存在很大的不兼容性，并且将来的行为可能会发生变化.

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.

建议:

非标准的 zoom CSS属性可用于控制元素的放大倍数.如果可能，应使用 transform:scale()代替此属性.但是，与CSS Transforms不同， zoom 影响元素的布局大小.

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>

这篇关于CSS非标准"ZOOM"财产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！