The viewport is the area of a web page that is visible to the user and provides the information to the user for his use. This area varies according to the size of the device, like desktop, laptop, smartphone, tablets etc. And units are given to viewport to size the viewport area according to the user's device size.

So there are four viewport units in CSS. These are vh, vw, vmin and vmax.

•  Viewport Height (vh)
•  Viewport Width (vw)
•  Viewport Minimum (vmin)
• Viewport Maximum (vmax)

Viewport Height (vh)
 
     This unit is based on the height of the viewport.  1vw is 1% of the viewport width

Viewport Width (vw)

     This unit is based on the width of the viewport. 1vh is 1% of the viewport height

Viewport Minimum (vmin)

     This represents the shortest dimension (1vw or 1vh)

Viewport Maximum (vmax)

     This represents the longest dimension (1vw or 1vh)

Example:-
 
Sections full height

 <div class="fullscreen a"><p>a<p></div>
        <div class="fullscreen b"><p>b</p></div>
        <div class="fullscreen c"><p>c</p></div>
        <div class="fullscreen d"><p>d</p></div>

        .fullscreen {
            height:100vh;
            width:100vw
        }

Font in "vh" or "vw"

Sections fonts
        
    If you reduce the width of windows font size is automatically reduce and vice versa.
        

<div class="fullscreen a"><p>a<p></div>
        <div class="fullscreen b"><p>b</p></div>
        <div class="fullscreen c"><p>c</p></div>
        <div class="fullscreen d"><p>d</p></div>

        .fullscreen {
            height:100vh;
            width:100vw;
            font-size:50vw;
            text-align: center
        }

 Sections fonts
        
If you reduce the Height of windows font size is automatically reduce and vice versa.
      

  <div class="fullscreen a"><p>a<p></div>
        <div class="fullscreen b"><p>b</p></div>
        <div class="fullscreen c"><p>c</p></div>
        <div class="fullscreen d"><p>d</p></div>

        .fullscreen {
            height:100vh;
            width:100vw;
            font-size:50vh;
            text-align: center
        }