What are EM and REM?
EM is a relative unit based on the font size of the parent element. REM (Root EM) is also a relative unit, but it is always based on the font size of the root element (html), making it easier to predict and control in responsive design.
Usage Instructions
- Set the parent element's font size (default is 16px)
- Set the root element's font size (default is 16px)
- Input the EM value to convert
- Click the "Convert" button or press Enter to get the result
- Use the "Copy" button to copy the conversion result
px
px
em
0
rem
Calculation formula: rem = (em × parent element font size) ÷ root element font size
Common Conversion Examples
- 1em = 1rem (when the parent element's font size equals the root element's font size)
- 1em = 1.25rem (when the parent element's font size is 20px and the root element's font size is 16px)
- 1em = 0.75rem (when the parent element's font size is 12px and the root element's font size is 16px)
- 2em = 2rem (when the parent element's font size equals the root element's font size)
Usage Tips
- Responsive Design: REM units are suitable for setting text sizes and spacing in responsive design, as they are relative to the root element's font size.
- Nested Elements: Be cautious of how EM values are calculated when used in nested elements, as EM values accumulate relative to the parent element.
- Default Value: Most browsers have a default root element font size of 16px, which is a good baseline.
- Mixing Units: In practical development, you can mix EM and REM. For example, use REM for the main typography scale and EM for handling relative sizes within components.
Notes
- EM values are affected by the font size of the parent element, so be especially careful when used in nested elements.
- REM values are only affected by the font size of the root element (html), making them easier to control.
- In responsive design, it's recommended to use REM as the primary relative unit.
- Conversion results are rounded to three decimal places for accuracy.