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

Question

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

Answer 1

MS is a typographical measurement unit.
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 1 in equals approximately 16 points.

The problem with using EM fonts is that they are variable as the 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. So the value of the body 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 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, i.e., of the body!

CSS EXAMPLE IN

 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 relates to the div
P: 12/30 = 0.4 as it relates to the div

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

But it’s quite boring to get the target and context value calculated for each of the elements. Then another unit of measure was created called REM
To REM will always have the body context value

The values of our example above would thus be referenced by body and not by the 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 note that some browsers may not support this measure

Calculator of the rem
Calculator of
Recommendations for using units in CSS

Answer 2

If you give why em is a relative distance measurement unit

Measures relating

For sources: units em, ex, ch, rem
Percentage of 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, that is depending on the device it changes

Absolute measures

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

Always static independent of the device and reference