Does the unit of measurement "on" change in each device?

EM is a typographic unit of measure. Home Its name is related to the letter "M", where the base size of this unit derives from the width of the letter M in uppercase. They say that 1em equals approximately 16 points.

The problem of using fonts in EM is that they are variables as the percentage. Unlike the use of pixels, we have to calculate our units in the project.

  

target ÷ context = result

An example: imagine a title, H1, whose text size is 20px.

CSS ORIGINAL EXAMPLE

       body {
         font: normal 100% verdana, arial, tahoma, sans-serif;
       }    
       div {
            font: 30px verdana, arial, tahoma, sans-serif;
        }

        h1 {
            font-size: 20px;
        }

        p {
            font-size: 12px;
        }

So the target (which is the element we want to change) is 20px. In that case BODY is the parent of our H1. So, the value of the body font is the context, which as we said before has the default value of 16px. Logo 20 ÷ 16 = 1.25 .

Imagine you want to make a mobile site or a website for large screens.
Instead of changing the fonts of each element, you can simply change the value of the target font, ie of the body !

CSS EXAMPLE in EM

 body {font: 100% verdana, arial, tahoma, sans-serif;}

    div {
        font-size: 1.88em;
    }

    h1 {
        font-size: 0.67em;
    }

    p {
        font-size: 0.4em;
    }

div: 30/16 = 1.88
h1: 20/30 = 0.67 because it is in relation to the div P: 12/30 = 0.4 because you are in relation to the div

By changing the percentage value of the body font, you can proportionally change the font of all other elements.

But it is rather annoying to calculate the target and context value for each of the elements. Then another unit of measurement called REM was created. REM will always have the context value of the body

The values in our example above would thus be referenced by body and not by DIV . Soon the values are as below:

CSS EXAMPLE in REM

  body {font: 100% verdana, arial, tahoma, sans-serif;}

    div {
        font-size: 1.88rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    p {
        font-size: 0.75rem;
    }

  

We always use base 16

div: 30/16 = 1.88
h1: 20/16 = 1.25
P: 12/16 = 0.75

  

But be aware that some browsers may not support this measure.

Rem Calculator Calculator on Recommendations for using CSS units

This is because em is a unit of measure of relative distance

Relative measures

For sources: units em , ex , ch , rem
Percentage of the viewport: units vw , vh , vmin , vmax
The W3C specification technically classifies the percentage (%) as data type and not unit of measure.

Are based on other measures, ie depending on the device it changes

Absolute measures

Units cm , mm , q , in , pt , pc , px

Always static device-independent and reference