如何为vh vw写css后备

Question

任何人都可以解释回退如何在CSS中工作？我试图为vh和vw设置它,显然我没有得到它...

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

CSS:

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

Answer 1

你的代码(以及为什么它不起作用)

看看你的原始代码,我有几条评论:

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

前缀,该-webkit-位,只适用,如果有一个前缀属性这个名字.高度没有前缀属性,因此浏览器只是忽略这些声明.

(提示:您可以检查MDN之类的内容以查看存在哪些属性.)

解:

在这种情况下,我们可以利用以下事实:如果浏览器遇到他们不理解的属性或值,他们会忽略它并继续前进.所以,你要找的是:

height: 41px;
height: 5.2vh;

浏览器看到了height: 41px,如预期的那样.它会解析它,并知道如何处理它.然后,它看到了height: 5.2vh.如果浏览器理解该vh单元,它将使用它而不是41px,就像color: blue; color: red;最终会变成红色一样.如果它不理解该vh单元,它将忽略它,并且,因为我们首先定义了回退,所以浏览器忽略该vh单元并不重要.

合理？

Answer 2

将你的跌倒放在你的其他价值之上.如果覆盖值不适用于浏览器,则使用第一个值.

 height: 41px;  /* The Fallback */
height: 5.2vh;

Answer 3

属性-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.