如何为vh vw写css后备

Question

任何人都可以解释后备如何在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 */

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，否则它们将恢复为最后一个“好”值：{{1 }}

Answer 4

您可以将height: 33.28px视为1vh = 4.8px。否则，以上答案是很好的。