Em, rem and Pxs. What is the difference ?

INTRODUCTION

Today, we are going to discuss the 3 musketeers of CSS. [EM, REM and PXs].

Being a good developer requires adopting the best practices of the tech and knowing "WHAT" property to use and "WHEN" to use. Many developers do not understand what is the difference between these basic CSS units and how using the right UNIT can make a considerable difference in the overall feel of your website and save you tons of time and give users a fantastic USER EXPERIENCE.

UNITS IN CSS

Before proceeding, Let's note that CSS units can be classified into two types.

ABSOLUTE and RELATIVE.

Absolute units are fixed units and don't change according to the screen size of the user.

While Relative units are relative to something like the size of the parent element's font or the size of the viewport.

Relative units allow the shrinking and scale of the element relative to its parent or root HTML.

What are PXs (pixels)?

Px (pixels) is an example of an absolute unit and one of the most commonly used units in CSS. They are fixed. They do not change according to the user's screen size.

Concerns while using px:

So, A heading of 20px size adjusted according to the desktop size won't shrink and might overflow on the mobile screen. This creates difficulty while making the design responsive or might increase the code as you will need to write extra CSS in media queries. This is the main disadvantage while using pixels as CSS units.

EM

Em is a relative unit. Let's see with an example.

Example:

In EM elements get sized relative to their parent element. Suppose a parent container has a size of 16px in that case, elements inside it will be relative to its parent size (16 px).

EM = size of the parent element

[1em will be 16px] [2em will be 32px] [0.5em will be 8px] and so on.

Concerns while using em:

As elements get sized according to their parent's size, things get nasty when we apply the em unit to deeply nested elements. 2em to the child will be 32 px and 2em to the grandchild will be 64 px and so on.

This is the reason why Em lacks consistency and gets behind when it comes to maintaining a website more standardized.

REM

It is also a relative unit. Let's see how it works

Example:

Rem is relative to root HTML which is by default 16px unless changed. In this case,

1rem will always be equal to 16px [1rem=16px no matter what] and 2rem will always be equal to 32px no matter how deeply nested elements are inside each other. This gives the overall website a more standardized look and creates a great user experience.

So that's it, my friend, I hope your doubts got cleared and you understood the difference between these CSS units.

Do give it a like, and let me know where I need to improve.

Thanks a lot for reading.