如何为 vh vw 编写 css 回退
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23350510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write css fallbacks for vh vw
提问by user3311351
Can anyone explain how fallbacks work in CSS? I am trying to set it up for vh and vw and clearly I am not getting it...
谁能解释回退在 CSS 中是如何工作的？我正在尝试为 vh 和 vw 设置它，显然我没有得到它......
Here is my attempted solution, which does not work. The height property is taken every time.
这是我尝试的解决方案，它不起作用。每次都采用 height 属性。
CSS:
CSS：
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
回答by Hawken Rives
Your Code (and why it doesn't work)
您的代码（以及为什么它不起作用）
Looking at your original code, I have a couple of comments:
查看您的原始代码，我有一些评论：
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
The prefixes, the -webkit-bit, only apply ifthere is a prefixed property by that name. Height doesn't have a prefixed property, so the browsers just ignore those declarations.
前缀，-webkit-即位，仅在存在该名称的前缀属性时才适用。Height 没有前缀属性，因此浏览器会忽略这些声明。
(Tip: You can check something like MDNto see what properties exist.)
（提示：您可以检查MDN 之类的内容以查看存在哪些属性。）
Solution:
解决方案：
In this case, we can take advantage of the fact that, if browsers encounter a property or a valuethat they don't understand, they ignore it and move on. So, what you're looking for is something like:
在这种情况下，我们可以利用这样一个事实：如果浏览器遇到他们不理解的属性或值，他们会忽略它并继续前进。所以，你正在寻找的是这样的：
height: 41px;
height: 5.2vh;
The browser sees height: 41px, as expected. It parses that, and knows what to do with it. Then, it sees height: 5.2vh. If the browser understands the vhunit, it will use that instead of 41px, just like color: blue; color: red;would end up being red. If it doesn't understand the vhunit, it will ignore it, and, because we defined the fallback first, the fact that the browser ignores the vhunit doesn't matter.
height: 41px正如预期的那样，浏览器会看到。它会解析它，并知道如何处理它。然后，它看到了height: 5.2vh。如果浏览器理解vh单位，它将使用它而不是 41px，就像color: blue; color: red;最终会变成红色一样。如果它不理解该vh单元，它将忽略它，并且因为我们首先定义了回退，所以浏览器忽略该vh单元的事实无关紧要。
Make sense?
有道理？
回答by ramesh
Place your fall back above you other values. If the overriding values dont work on a browser, the first value is used.
将您的回落置于其他价值观之上。如果覆盖值在浏览器上不起作用，则使用第一个值。
height: 41px; /* The Fallback */
height: 5.2vh;
回答by Dai
The properties -moz-height, -webkit-height, -o-height, and -ms-heightare not valid extension properties, they're not defined by any of the UA implementations.
属性-moz-height、-webkit-height、-o-height和-ms-height不是有效的扩展属性，它们不是由任何 UA 实现定义的。
You're getting height: 41pxas the winning value because -webkit-height(in Chrome or Safari) isn't being recognised at all, but height: 41pxis.
您获得height: 41px了获胜价值，因为-webkit-height（在 Chrome 或 Safari 中）根本没有被识别，但被识别height: 41px。
You'll want to use this:
你会想要使用这个：
height: 41px;
height: 5.2vh;
...with this code, browsers will first recognise height: 41px, then if they recognise height: 52.vhthat will be applied, otherwise they'll revert to the last "good" value: 41px.
...使用此代码，浏览器将首先识别height: 41px，然后如果它们识别height: 52.vh出将应用，否则它们将恢复到最后一个“好”值：41px。
