如何为vh vw编写css回退

前端之家收集整理的这篇文章主要介绍了如何为vh vw编写css回退前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何人都可以解释后悔如何在CSS中工作?我正在为vh和vw设置它,显然我没有得到它…

这是我尝试的解决方案,这不行。每次都采用height属性

CSS:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */

解决方法

你的代码(为什么它不工作)

看看你的原始代码,我有几个意见:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px;  /* The Fallback */

前缀,-webkit-位,仅适用于具有该名称的前缀属性。 Height没有前缀属性,所以浏览器只是忽略这些声明。

(提示:您可以查看类似于MDN的信息,以查看存在的属性。)

解:

在这种情况下,我们可以利用这样一个事实,即如果浏览器遇到不了解的属性或值,那么它们会忽略它并继续进行。所以,你所寻找的东西就像:

height: 41px;
height: 5.2vh;

浏览器会按照预期的方式看到height:41px。它解析了,并且知道该怎么做。然后,它看到height:5.2vh。如果浏览器了解vh单元,它将使用而不是41px,就像color:blue;红色;最终会变红。如果它不明白vh单元,它将忽略它,并且因为我们首先定义了回退,所以浏览器忽略vh单元并不重要。

合理?

猜你在找的CSS相关文章