REM Units 📏

REM units can become very useful when it comes to making your entire site responsive quickly and easily.

What are REM units

Rem in CSS stands for “root em”, which is the font size of the root. This means that 1rem equals the font size of the html element.

By default, the value of 1rem is 16px.

How to use REM units effectively

The idea behind using REM units is that you can set each size, padding and margin using this unit, and then dynamically change only the current REM value to achieve an automatic responsive effect.

For example, from desktop REM it will have a value corresponding to 18px while from mobile it will have a value of 15px. This way each element will shrink or scale down.