html – Does the "in" unit of measure change for each device?

Question:

When I put it as a "1em" unit in a "font-size" for a desktop for example, it will be 15px by default already from the browser. But the "em" is worth a smaller size for a mobile device for example, right?

Answer:

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

The problem with using fonts in EM is that they are variable like percentage. Unlike using 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 modify) is 20px. In this case, BODY is the father of our H1. Therefore, the value of the body's font is the context (context), which as we said has the default value of 16px. Hence 20 ÷ 16 = 1.25 .

Imagine you want to make a mobile website or a website for big screens.
Instead of changing the fonts of each element, you can simply change the font value of the target, ie 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 as it is in relation to the div
P: 12/30 = 0.4 as it is in relation to the div

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

But it is quite annoying to calculate the target and context values ​​for each of the elements. So another unit of measure called REM was created.
REM will always have the context value of body

The values ​​in our example above would look like this if referenced by the body and not by the DIV . Then 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
em calculator
Recommendations for using CSS units