Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn How to Use CSS3's Viewport Units - Web Design Tips

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 880
    Comment on it

    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
            }

     

     Learn How to Use CSS3's Viewport Units - Web Design Tips

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: