If you have px-to-rem conversion
:root {
font-size: 16px;
}
You can use the following table px-to-rem conversion.
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 31px | 1.9375rem |
| 32px | 2rem |
| 33px | 2.0625rem |
| 34px | 2.125rem |
| 35px | 2.1875rem |
| 36px | 2.25rem |
| 37px | 2.3125rem |
| 38px | 2.375rem |
| 39px | 2.4375rem |
| 40px | 2.5rem |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2.875rem |
| 47px | 2.9375rem |
| 48px | 3rem |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3.25rem |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375rem |
| 56px | 3.5rem |
| 57px | 3.5625rem |
| 58px | 3.625rem |
| 59px | 3.6875rem |
| 60px | 3.75rem |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4rem |
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
