Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Typography viewport size

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 677
    Comment on it
    Hello reader,

    In this blog we will discuss about, how to manage font size in different viewport. Usually we fix the font size with different viewport size using @media. But as we know CSS3 has some new values. Viewport size: vw, vh, and vmin are one of them.

    How its works :-

    One unit of the three value is 1% of the viewport
    viewport = browser window size = window object
    If the viewport is 50cm wide, 1vw == 0.5cm


    1vw = 1% of viewport width
    1vh = 1% of viewport height
    1vmin = 1vw or 1vh, whichever is smaller
    1vmax = 1vw or 1vh, whichever is larger

    If you use this, the object size like font size will change automatically according your viewport size.

    Note: Its work with all major browser.
    Note: Its not only for font-size.

        h1 {
        font-size: 6vw;
        }
    
    <h1>Hello</h1>
    

 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: