CSS relative sizing

Looking for an answer to the above question in the link which I also had, cheers ! :slight_smile:

Copy of previously posted question:
I am having a difficult time understanding how using relative measurements (especially the EM and REM measurements for text) does anything for responsive design. Here’s my problem: I understand that EM is calculated relative to parent size and REM is calculated relative to the root size.

BUT

… since both the parent size and root size are set in pixels, how does converting other measurements into EM and REM change anything?

Are we missing a next step here? For example … will there be a step where we learn to define either the parent or root default differently for different types of screens?

1 Like

You are current with the unit em taking the relative size of the parent and rem taking the relative size of the root element.

For the em unit it will take X (font-size: Xem) and multiple the X by what the font-size of the parent element is. For the rem unit it will take Y (font-size: Yrem) and multiply Y by the font-size of the root element.

Let’s take this HTML/CSS as an example. Gist

The em unit takes the size of the direct parent element. In this example, its the p witch is a child of the <div class="div">. So it multiples the 5 from the 5em by the font-size of the parent element which is 20px. So the font size is equivalent to 100px as shown in the example

The rem unit is the same as the em unit except the size is not from the parent and instead from the :root element. So in the example below the 5rem is equivalent to 50 px.

<div class="div">
<p class="em">This is 5em</p>
</div>
<p style="font-size:100px;">This is 100px</p>

<p class="rem">This is 5rem</p>
<p style="font-size:50px">This is 50px</p>
:root {
  font-size: 10px;
}

.div {
  font-size: 20px
}

.em {
  font-size: 5em;
}

.rem {
  font-size: 5rem;
}

View the result here

For units other than px it’s the same. It would just multiply like with px.

I believe that there is a step for the : root element. And the parent element you probably already know how to do. But because I don’t know how far you are in learning CSS I can’t say for sure if you know it or not. And for different screen sizes, you can use another relative unit such as vw (1% of the width of the screen) or vh (1% of the height of the screen).