Quick guide to CSS Units (px, em, rem)

#css #webdev

Here are some commonly used CSS Units with the pros and cons of each of them.

PIXEL(px):
Pixels are fixed in size. 1px = 1 dot on a computer screen. It is an absolute unit of measure

Pros:
Pixels are preferred when we want to develop pixel-perfect web applications (Non-responsive in nature)

Cons:
Pixels cannot be used to build a responsive website. If we need to build a responsive website, then excessive use of media queries would have to be used in order to achieve a responsive design which might become cumbersome. This approach will also lend towards missing few viewports.

When to use?
Pixels come in handy especially when we have fixed divs, like the height of a header or footer remains the same irrespective of the viewport.

POINT(pt):

Points are usually used for things to be printed on paper ie for print media.
Same as a pixel.
Fixed measure and not scalable.

EM:
EM is always equal to the current font-size. It is scalable in nature.

Pros:
Since it is scalable, can build responsive websites.
If font-size is equal to 16px, then 1em = 16px, 0.5em = 8px and 2em = 32px.

Cons:
Em causes an issue when we have nested elements.

Let us have a root at 100% that is 16px. Let there be a child who should have 12px, so we specify the value as 0.75em. Now if we have another child inside this, it will get a font size of 0.75em of 12px, that is 9px. To avoid this, we need to again specify it

html { font-size: 100%; } ul { font-size: 0.75em; } ul ul { font-size: 1em; }

We need to pay a lot of attention when nesting of elements take place.

PERCENT(%):

Percent unit is similar to em.

Pros:
As the name suggests, percent of something. If nothing specified, it will take % of the browser's width or height.
Useful for building Fluid Layout.

Cons:
If the child elements are fixed width, and if a parent is in %, it can result in unexpected layout. Need to be careful with nested elements.
NOTE: When base size increases, % and em automatically increases but pixel and pt remain the same.

REM:
Stands for Root EM. REM is relative only to the root size whereas em is relative to its nearest parent.

Pros:
Rem always takes the root size into consideration irrespective of the nesting of elements.

Cons:
Browser default size for Rem is 16px. Hence it becomes difficult to remember the rem values.

10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25rem 24px = 1.5rem 30px = 1.875rem 32px = 2rem

2.Partial support in IE 10.

VW, VH:

These units are viewport width and viewport height respectively. 1vw = 1/100 th of the viewport width and
1vh = 1/100 of viewport height.
It is a relative measure.

NOTE: There major difference between % and vh/vw is that VW unit determines its size based on the width of the viewport. Browsers calculate the viewport size as the browser window, which includes the space for the scrollbar whereas in %, it's only the width of the html element.
If we set 100vw, then it will include the html element+body+scrollbar width.

For heights, if we use %, it can cause an issue as the size in % of an element is determined by its parent height. We can have an element fill the entire screen only if its parent also fills the entire height of the screen.
But,
.test {
height: 100vh;
}

Here, no matter how the element is nested, it will be relative to the viewport dimensions. The problem of scrollbar won't be an issue since most webpages don't have a horizontal scroll.
Hence, when dealing with widths, the % unit is more suitable. With heights, the vh unit is better.