如何为vh-vw编写css回退



有人能解释一下回调是如何在CSS中工作的吗?我正试图为vh和vw设置它,显然我没有得到它…

这是我尝试的解决方案,但不起作用。每次都获取高度属性。

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; color: red;最终会变成红色一样。如果它不了解vh单元,它会忽略它,而且,因为我们首先定义了回退,所以浏览器忽略vh单元这一事实并不重要。

有道理吗?

将您的回退置于其他值之上。如果替代值在浏览器上不起作用,则使用第一个值。

 height: 41px;  /* The Fallback */
height: 5.2vh;
属性-moz-height-webkit-height-o-height-ms-height不是有效的扩展属性,它们未由任何UA实现定义。

你得到height: 41px作为获胜值,因为-webkit-height(在Chrome或Safari中)根本没有被识别,但height: 41px是。

你会想要使用这个:

height: 41px;    
height: 5.2vh;

使用此代码,浏览器将首先识别height: 41px,然后如果它们识别将应用的height: 52.vh,否则它们将恢复到最后一个"好"值:41px

您可以将height: 33.28px视为1vh=4.8px。否则,以上答案都很棒。

最新更新