如何写vh vw的css回退 [英] How to write css fallbacks for vh vw

问题描述

任何人都可以解释CSS中的后备工作原理？我试图设置它为vh和vw，显然我没有得到它...

这是我尝试的解决方案，这不工作。

CSS：

  webkit-height：5.2vh; 
 -moz-height：5.2vh; 
 -ms-height：5.2vh; 
 -o-height：5.2vh; 
 height：41px; / * The Fallback * / 
  

解决方案

查看原始代码，我有几个意见：

  -webkit-height：5.2vh; 
 -moz-height：5.2vh; 
 -ms-height：5.2vh; 
 -o-height：5.2vh; 
 height：41px; / *后退* / 
  

前缀， -webkit - code>位，仅应用如果有该名称的前缀属性。 Height没有前缀属性，因此浏览器只是忽略这些声明。

（提示：您可以检查

解决方案：

>

在这种情况下，我们可以利用以下事实：如果浏览器遇到一个他们不明白的属性或值，他们会忽略它并继续前进。所以，你要找的是什么样的：

  height：41px; 
 height：5.2vh; 
  

浏览器看到 height：41px 预期。它解析，并知道如何处理它。然后，它会看到 height：5.2vh 。如果浏览器理解 vh 单位，它将使用而不是41px，就像 color：blue; color：red; 会最终变为红色。如果它不理解 vh 单元，它将忽略它，并且，因为我们首先定义了回退，浏览器忽略 vh 单位无关紧要。

有意义吗？

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

Here is my attempted solution, which does not work. The height property is taken every time.

CSS:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */

解决方案

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 if there is a prefixed property by that name. Height doesn't have a prefixed property, so the browsers just ignore those declarations.

(Tip: You can check something like MDN to see what properties exist.)

Solution:

In this case, we can take advantage of the fact that, if browsers encounter a property or a value that 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 vh unit, it will use that instead of 41px, just like color: blue; color: red; would end up being red. If it doesn't understand the vh unit, it will ignore it, and, because we defined the fallback first, the fact that the browser ignores the vh unit doesn't matter.

Make sense?

这篇关于如何写vh vw的css回退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！