Convert pixel to rem if :root font-size is 16px

If you have

:root {
font-size: 16px;
}

You can use the following table to convert from PIXELS to REMS

10px0.625rem
11px0.6875rem
12px0.75rem
13px0.8125rem
14px0.875rem
15px0.9375rem
16px1rem
17px1.0625rem
18px1.125rem
19px1.1875rem
20px1.25rem
21px1.3125rem
22px1.375rem
23px1.4375rem
24px1.5rem
25px1.5625rem
26px1.625rem
27px1.6875rem
28px1.75rem
29px1.8125rem
30px1.875rem
31px1.9375rem
32px2rem
33px2.0625rem
34px2.125rem
35px2.1875rem
36px2.25rem
37px2.3125rem
38px2.375rem
39px2.4375rem
40px2.5rem
41px2.5625rem
42px2.625rem
43px2.6875rem
44px2.75rem
45px2.8125rem
46px2.875rem
47px2.9375rem
48px3rem
49px3.0625rem
50px3.125rem
51px3.1875rem
52px3.25rem
53px3.3125rem
54px3.375rem
55px3.4375rem
56px3.5rem
57px3.5625rem
58px3.625rem
59px3.6875rem
60px3.75rem
61px3.8125rem
62px3.875rem
63px3.9375rem
64px4rem

 

How many Rems are in a Pixel?

If base = 16 px
1 px = 0.0625 rem

Pixel

A pixel is the smallest element of an image that can be individually processed in a video display system.

px – Pixels

Rem

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

rem – Rems

Leave a Reply