详解CSS中视窗单位和百分比单位的使用

因为这个细微的差别，当使一个元素横跨整个页面的宽度时，最好使用百分比单位而不是视口的宽度。
占满高度的元素:vh > %

在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。

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

然而，用vh的话，就像下面写的那么简单：

1. .example {
2.   height: 100vh;
3. }

不管.example元素如何嵌套，它还是能够相对于视窗尺寸设置大小。滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。

这里有一些我们可以如何使用vh单位来轻松的创造一些设计的例子。
全屏的背景图片

vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。这用vh很容易实现:

1. .bg {
2.   position: relative;
3.   background: url(‘bg.jpg’) center/cover;
4.   width: 100%;
5.   height: 100vh;
6. }

占满全屏的内容块像“多页面”一样

同样地，我们也可以实现有“多页面”的效果，通过使页面的每个内容块跨越视口的整个高度和宽度。

1. section {
2.   width: 100%;
3.   height: 100vh;
4. }

我们可以用javascript来实现翻动页面的错觉。

1. $(‘nav’).on(‘click’, function() {
3.   if ( $(this).hasClass(‘down’) ) {
4.     var movePos = $(window).scrollTop() + $(window).height();
5.   }
6.   if ( $(this).hasClass(‘up’) ) {
7.     var movePos = $(window).scrollTop() – $(window).height();
8.   }
10.   $(‘html, body’).animate({
11.     scrollTop: movePos
12.   }, 1000);
13. })