有人能解释一下回调是如何在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。否则,以上答案都很棒。