Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Units

    • 0
    • 3
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 289
    Comment on it

    Hi all,

    It is always challenge to manage the size (mainly font size) in css. usually we use media query to measure all that. But here is some other CSS Unit which helps to manage sizes, so I am going to introduce you to some CSS units, about which you might not known before.

    em

    This is very useful unit for measure. Now how it works?
    If I define body font-size 14px and div font size 1.2 em then div font render with 16.8px

    Example :-

    body {
        font-size: 14px;
    }
    div {
        font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
    }
    

    rem

    The unit rem (root em) works like as em but its not inherited with parents and it is not only useful for font but also it very useful for gird.

    Example:-

    main{
        width: 70rem; // 70 * 14px = 980px
    }
    

    vh and vw

    vh (view port height) and vw (view port width) unit is useful for responsive web design because this depend on your screen size. The vh element is equal to 1/100 of the height of the viewport. So if screen width is 800px then font size is 1vh along with the font size render with 8px.

    Example :-

    For screen size 1200

    div {
        font-size: 1vh; // calculated at 1200/100, or 12px
    }
    

    vmin and vmax

    This woks same as vh or vw but if we use vmin (viewport minimum) then vmin compare the screen height and width, in both of them which one have minimum value that will applied. Same process is followed with vmax (viewport maximum).

 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: