How to convert PX to REM in CSS

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).

How many Rems are in a Pixel?

If base = 16 px
1 px = 0.0625 rem

There is an easy trick to convert pixels(px) to REM in css.

html {
  font-size: 10px;
}

Put font-size as 10px to html tag

Now you can just divide each pixel unit by 10, if padding is 20px then it will convert as 2rem

.title{
    padding: 2rem; /* padding:20px*/
}