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).