视窗单位 vs 百分比单位

声明：

本文大部分内容属于摘录，引用原文地址如下：
视窗单位 vs 百分比单位

---

视窗(Viewport)单位

视窗(Viewport)单位是相对单位，意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单位。

我将集中讨论前两个单位，因为它们更可能被使用。

在很多情况下，视口单位(vh和vw)和百分比单位在它们可以实现的功能方面是重叠的。然而，它们每个都有其明显的优点和缺点。概括的说:

//当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。著作权归作者所有。

1、处理宽度时，%表示的是html或者body的比例。然而vm单位根据视窗的宽度决定它的大小。他们之间细微的区别在于，浏览器的视窗包含了两边的滚动条和边框等。因为应以内容为标准，所以推荐使用百分比。
2、处理高度时
在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。

因为用百分比定义的元素的大小是由它的父元素决定的，只有父元素也填满整个屏幕的高度时我们才能拥有一个填满整个屏幕的高度的元素。这通常意味着我们不得不把元素定位成固定的，为了使元素的父元素为html元素，或者依赖一些程序。

只需要设置它的vh

.box {
    height: 100vh;
}

更多效果请参考原地址。