在CSS中使用视口宽度/高度错误做法吗？

Question

有时在CSS中使用vw和vh测量值对于制作响应式网页似乎很有用

但是，我看到并且我亲自在非常不寻常的地方使用它。

我很好奇是否使用视口度量是一种不好的做法，或者是否应该继续使用它们来使网页具有响应性。

我喜欢视口度量，因为它们像100%度量，但它们确实有效，并且基于整个窗口，而不仅仅是父元素。

一些使用示例：

/* Background */
.backgroundDiv {
 width: 100vw;
 height: 100vh;
}

/* a Top Bar */
.divHeader {
 width: 100vw;
 height: 10vh;
}

Answer 1

vw和vh是标准单位，应像其他单位一样工作。即使它们使用不正常，只要有效使用它们，也可以像其他所有单元一样使用它们。 vw和vh确实存在一些问题，并且与CSS的其他部分一样也存在跨浏览器问题，因此可以将其选中here。但是，视口单位是标准化的，因此使用它们与使用其他任何单位一样安全。

在上面的代码中，建议不要使用视口高度设置height；最好设置其子元素的大小，然后让它们动态设置.divHeader的高度。 vw和vh在制作响应式网站时很有用，但在某些情况下，使用百分比或仅依靠边距和填充为您动态构建元素会更好。

Answer 2

我认为这不是一个坏习惯。如果方便的话，可以使用所需的任何单位。重要的是浏览器支持：https://caniuse.com/#feat=viewport-units