css - 如何为 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将被应用，否则它们将恢复为最后一个“好”值：41px.

Answer 4

您可以考虑height: 33.28px为 1vh = 4.8px。否则上面的答案很棒。