Why we use REM instead of PX

What is REM

Rem is css unit. To recap, the rem unit means “The root element’s font-size”.  However, if you change the <html> font size in the CSS you will see that everything else changes relative to it. 

We have used REM instead of px because we can easily manage font size and spacing using REM, a big benefit of REM is that it can control the entire font size from one place. Yes, there are 16 Px in 1 rem and we can control it according to our own, some most popular websites are also using rem rather than px. Like hubspot.com , wordpress.org, atlassian.com, netflix.com, aws.amazon.com etc.

Some disadvantages of using rem

As we have described above, there are a lot of benefits of using rem but at the same time to apply rem its time taking. For example, of we have set font size or spacing in rem for the desktop version, now for the mobile or tablet version if we change the percentage then at some places font size and spacing may get disturbed, then you have to work on that section to maintain the design. So, sometimes it is time taking process

Why we are not using px

We are not using the px because we cannot control the px from one place. For responsiveness we have to manage the font size and spacing of every title and paragraph, which requires a lot of work.

How to use rem in responsive

html {
	font-size: 100%;
}

@media(max-width: 767px) {
	html {
		font-size: 80%;
	}
}
@media(max-width: 599px) {
	html {
	font-size: 75%;
	}
}