如何为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 */

- user3311351

Answer 1

你的代码（及其为何无法正常工作）

看了你原始的代码，我有几点评注：

-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 单位并不重要。

有道理吗？

- Hawken MacKay Rives

---

请删除您回答的第一部分，或在其前面加上“Your Code”，因为乍一看，第一个代码片段似乎是被接受的答案。这让我感到困惑，因为像您后来描述的那样，“The Fallback”应该在vh之前。 - redfox05

我喜欢你的编辑；只要我能够弄清楚如何使用它，或者它被足够多的人审核通过，我就没问题。 - Hawken MacKay Rives

我刚刚通过我的个人资料统计才意识到，尽管你喜欢这个编辑，但其他人完全拒绝了它，因为“这个编辑并没有使帖子变得更容易阅读、更易于查找、更准确或更易于访问。修改要么是完全多余的，要么会损害可读性。”和“这个编辑旨在回应帖子的作者，作为编辑毫无意义。它应该被写成评论或答案。”唉，我们不能赢啊:P 谢谢你的信任。 - redfox05

给最后的编辑们：我同意备选方案应该放在第一位，但是我只是引用了原始代码。谢谢！ - Hawken MacKay Rives

Answer 2

把备用值放在其他值之上。如果浏览器不支持覆盖值，则使用第一个值。

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

- ramesh

Answer 3

属性 -moz-height、-webkit-height、-o-height 和 -ms-height 不是有效的扩展属性，它们没有被任何 UA 实现定义。

之所以得到 height: 41px 的胜出值，是因为在 Chrome 或 Safari 中无法识别 -webkit-height，但能识别 height: 41px。

你需要使用以下代码：

height: 41px;    
height: 5.2vh;

使用这段代码，浏览器首先会识别 height: 41px，然后如果它们能够识别 height: 52.vh，则应用该值，否则它们将恢复到最后一个“良好”的值：41px。

- Dai

Answer 4

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

- oklm

---

视口高度，意味着它基于您设备的视口大小。如果我使用1300 x 780像素的笔记本电脑访问该网站，那么1 vh的含义就会与1920 x 1080 vh完全不同。 - Dorvalla