如何为 vh vw 编写 css 回退

Posted 2023-03-15

【中文标题】如何为 vh vw 编写 css 回退

【英文标题】：How to write css fallbacks for vh vw

【发布时间】：2014-06-14 13:20:09

【问题描述】：

谁能解释回退在 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 */

【参考方案1】：

将你的支持置于其他价值观之上。如果覆盖值在浏览器上不起作用，则使用第一个值。

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

【参考方案2】：

-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。

【参考方案3】：

您的代码（以及为什么它不起作用）

查看您的原始代码，我有几个 cmets：

-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 单元这一事实并不重要。

有意义吗？

【讨论】：

请删除答案的第一部分，或在其前面加上“您的代码”，因为乍一看，第一个代码 sn-p 是已接受的答案。这让我感到困惑，因为 px “The Fallback”应该在 vh 之前，正如您稍后在回答中所描述的那样。

我喜欢你的编辑；只要我弄清楚如何使用它，或者它得到足够多的人的审查，我就可以了。

我只是在查看了我的个人资料统计信息后才意识到，即使您喜欢该编辑，它也被其他人完全拒绝为This edit does not make the post even a little bit easier to read, easier to find, more accurate or more accessible. Changes are either completely superfluous or actively harm readability. 和his edit was intended to address the author of the post and makes no sense as an edit. It should have been written as a comment or an answer。叹息，我们不能赢吗：P 为信任投票干杯。

致最后的编辑：我同意后备应该首先出现，但我引用了原始代码。干杯！

【参考方案4】：

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

【讨论】：

视口高度，意味着它基于您设备的视口，如果我用 1300 x 780 的笔记本电脑到该站点怎么办.. 1 vh 与 1920 x 1080 vh 的含义完全不同。 ..