Secrets to using REM in CSS: CSS Tips

#css #programming #codenewbie #webdev

As device sizes proceed to wander and programs give more client alternatives, utilizing static units simply doesn't cut it any longer. Some such countless individuals set their browser inclination to bigger content with no impact on the sites they visit.

While pixels will permit clients to zoom in and out, their content settings on their PC or program won't have any impacts.

By utilizing REM units you make Scalable sites that keep up the proportions between components while likewise scaling to the client's inclination. So if a client sets their settings to have bigger content - your site ought to react so they can appreciate it like every other person!

Over the last couple of years, I have stopped using pixel units and also advising people to do the same. Let's see why you should use REM units.

REM vs EM

But first, we must clear up the difference between EM and REM units. Both units are calculated to form the font size and use a base value the number of ems/rems is the multiple of that value.

Example:

/*Base fontsize 16px*/
1rem = 16px
2rem = 32px

1em = 16px
2em = 32px

The difference is that REM values always use the root base value (set on the HTML element), whereas EM units are relative to their container.

Example:

/*Base fontsize 16px*/
/*Container fontsize 20px*/

1rem = 16px
2rem = 32px

1em = 20px
2em = 40px

What is the root base value?

The default base font size is set by the browser and on most of the browser 1 rem = 16px. This means you can even use the standardized 8px grid since 0.5rem = 8px.
It is possible to set your base value by changing the font-size of the HTML element but the beauty f letting the browser control the default value is that users can change it.

Fluid Elements

By using REM units and letting the browser (and user control the base value, you create scalable elements that will keep their form when they are sized up or down. This created truly fluid and flexible layouts that will scale beautifully no matter the users' personal preference and settings.

Example:-

h1 {
   font-size: 2rem; 
 }

p {
   font-size: 1rem;
}

The title will be always larger than the paragraph text no matter what the base size is. They scale together. And this is the same with the buttons too, font-size, border-radius and padding all scales with the base size.

What about PX units?

The pixel has a place on the web through ad there are plenty of times when you require a fixed value that isn't scald based on the user's preference. For example, pixels are still good for setting borders that don't always need to scale.

Thank you for showing interest and reading. So use REM instead of PX🤗.