The Viewport width & height Percentage Lengths

 

Viewport width (vw)
This is a "viewport width" unit. You specify the width in term of "vw" then it will work for a viewport width. It is similar like as percentage i.e 1vw is equal to 1%.

For Example:

.slider {
  width: 50vw;
}

Here in the above width: 50vw; means half width of overall screen or viewport device.

Viewport width (vh)

This is also same as the viewport width (vw) unit only it is based on the viewport height instead.
For Example:

.slider {
  width: 50vh;
}

<div class="slider"></div>

It will show the half of screen height. Here the div that has defined slider class that means div has assigned a height 50% of screen.

Difference between Percentage Lengths & Viewport Percentage Lengths

Percentage Lengths Viewport Percentage Lengths
1) It is used to specify a length for 1) It is used to specify a length for
a particular block. a whole screen or Viewport.

2)For Example:  2)For Example:
.slider { .slider {
  width: 50%;                                                                   width: 50vh;
} }


Please see the demo