Question

这个例子有什么不利之处吗？

.class {
    max-height: 500px;
    max-height: 50vh;
}

我想这样做，因为如果某些浏览器不支持vh，则该浏览器将应用max-height: 500px;并忽略vh行。

Answer 1

我认为有一个链接可以帮助你。 How to write css fallbacks for vh vw 如果浏览器遇到他们不了解的属性或价值，他们会忽略它并继续前进。

Answer 2

这绝对没问题。它们是级联的，所以具有相同重要性级别的最后（支持）样式总是会赢。通常情况下，用另一个类覆盖一些CSS规则，因此浏览器有多个相同属性的实例可供选择。那么为什么不允许在同一个班级允许这个？除了额外的代码行，我看不出任何缺点，但是如果你必须支持旧的浏览器，你需要一个后备。

我假设您知道500px并不总是与50vw / vh相同的宽度/高度，所以是的，不利的是，它在旧版浏览器中可能看起来不同。但从句法角度来看，没有错。

Answer 3

没关系为不支持vh或vw的浏览器提供后备。

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

它没有任何问题，如果Modernizr已经使用此检查来检查不受支持的浏览器。

您使用的指标取决于窗口和对象大小。同时考虑使用 px 和 vh 。

Answer 4

不，

vh将具有优先级（因为它是css文件中的最后一个max-height），但前提是当前浏览器支持它。但是很多浏览器都支持vh（93.19％）：

所以对我来说没关系，我从来没有听说过在一个类中使用多个相同的属性

Answer 5

是。有一个缺点。 50vh取决于设备的视口，它等于50％的视口，而500px是设备的像素值，它们不是同时相等。

其次，如果浏览器支持最后一个执行，即50vh。

我希望你明白我的观点。如有任何疑问，请评论。一切顺利。