REM, short for root EM is a relative unit that is now widely used by developers because of its accessibility. Usually, the default root font-size is 16px . So, if we look at the code, it says, for example, font-size: 1rem , meaning that it's the same as giving us a font-size of 16 pixels. The value really depends on the active font-size. Conversion is based on the default font-size size of 16 pixels, but can be changed.
Using rem and em will be very useful for crucial elements like font-size, padding, margin.
| PX | REM |
|---|---|
| 1px | 0.06rem |
| 2px | 0.12rem |
| 3px | 0.18rem |
| 4px | 0.25rem |
| 5px | 0.31rem |
| 8px | 0.5rem |
| 10px | 0.62rem |
| 12px | 0.75rem |
| 14px | 0.87rem |
| 15px | 0.93rem |
| 16px | 1rem |
| 18px | 1.12rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 48px | 3rem |
| 64px | 4rem |
| 96px | 6rem |
| 100px | 6.25rem |