有人能否解释一下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 */
有人能否解释一下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 */
看了你原始的代码,我有几点评注:
-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
单位并不重要。
有道理吗?
把备用值放在其他值之上。如果浏览器不支持覆盖值,则使用第一个值。
height: 41px; /* The Fallback */
height: 5.2vh;
-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
。
你可以将 height: 33.28px
视为 1vh = 4.8px。否则以上的答案也很好。