Similar to EMs, key difference is how the relative measurement is calculated
Instead of sizing fonts relative to their parent containers, REM sizes fonts relative to the root view (i.e. )
This means a lot less math when attempting to calculate the real pixel value
Example: REMs in Action
In the example above, the .green-box element has it’s font size set using REM (font-size: 1.4rem). This means that it will be sized relative to the root element ( or
This is due to the fact that REMs are calculated relative to root element so in the case of the .green-box element the browser will use the following calculation to determine its font-size in pixels:
16px * 1.4 = 22.4px
You don’t need to set the base font-size on the <html> element because it inherits font-size from the <body> tag by default. Therefore, most developers set the base font-size on the <body> tag