The power of REM and EM finally explained! You may have come to terms with using flexible units of measurement, but you still might not fully understand when to use REM and when to use EM. This tutorial will help you figure it out!
Both EM and REM are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. If you use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.
- Both REM and EM are relative units.
- EM children inherit size by scaling in relation to the parent font size.
- REM is only relative to the html (root) font-size.
- REM is best used to define the padding and margins.
- REM stands for “root em”.
- REM units help for responsive design.
- REM units are great for rapid prototyping.
- All sizes should be in REM units.
- REM units do not work in IE8.