PX TO REM
A converter that calculates the rem from a px for a given rem size to make the measurement responsive
A converter that calculates the rem from a px for a given rem size to make the measurement responsive
As we can see in this list, px is a absolute unit, which is fixed with 1px = 1/96th inch.
While the em and rem, are the relative unit to the font size.
| Unit | Name | Description |
|---|---|---|
| px | Pixels | 1px = 1/96th of 1in |
| em | Element | Relative to the font-size of the element (2em means, 2 times the size of the current font) |
| rem | root em | Relative to font-size of the root element (<html>) |
So, when calculte the rem size of the given px size, it is just using the px size , dividing the root element's font-size.
Then we get the the rem size of the give px size in the current font-size.
We need use the px size, divide the root element's font-size.
For example, if the root element font size is 16px, then convert the 16px to rem is 1rem.
As well as is 32px , it is 2rem.
px is the abbreviation of pixel.
Which represents the theorical smallest dot displayed on a computer screen.
Relative to font-size of the root element.
It varies with the root element font size.
px to rem formula: rem = px / root-element-font-size
| PX | REM |
|---|---|
| 10px | 0.625rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 32px | 2rem |
| 48px | 3rem |
| 60px | 3.75rem |
| 64px | 4rem |
| 70px | 4.4rem |
| 75px | 4.7rem |
| 80px | 5rem |
| 90px | 5.625rem |
| 100px | 6.25rem |