So pixels will not bring us closer
to a more responsive design,
to a more adaptive design in our website.
For this, we need more dynamic units
which are scalable in the end.
We have three different unit types
to choose from for this purpose.
We have percentages,
which we also use throughout the course already.
We have em which stands for ephemeral unit.
We'll dive deeper into what this means
and how it works in the next minutes.
And we have rem.
Rem stands for root ephemeral unit,
so this seems to be kind of related to the em unit.
What are these units about now?
Well, the percentage unit is relative
to the parent elements size.
Talking about the font size property here in particular,
this means that if we set a percentage value for the font
size of our current element,
then this percentage value will refer to the font size of
the parent element of our current element that we are
working on.
This has one disadvantage though.
The disadvantage is the management of the sizes,
the font sizes (indistinct) then.
Because this cascading nature we have if size,
percentage size, depends on the parent element size
can become quite cumbersome quickly, because the more units
we have, the more font sizes we apply,
well the more complex our structure becomes.
We might have many nested elements in here and therefore
managing sizes with percentage units can cause some issues
from time to time.
What about the alternative though,
M and REM?
M is a size
that is relative to the font size.
You see this sounds kind of (indistinct).
This also has reasons
because here the property is important.
So using M for the font size means that the size,
the font size, depends on the parent element size
using the M unit in another context with other properties.
The which property you have, for example,
well then this does not necessarily hold.
Therefore we'll just keep in mind that for the M unit the
size is relative to the font size of another element here.
This has again, the same disadvantage.
We have another cascading nature.
So the size depends on an inherited size,
which can cause confusion from time to time.
For REM things are a bit different.
REM means that the size,
the font size here of our current element,
where this REM unit is applied,
is relative to the root elements, font size.
The root element is the HTML element.
This at first sounds pretty straightforward.
So you always calculate the size depending
on the root element size.
And if you don't add a specific size
for the font size in this root element,
well then the size always is relative to the current setting
that the user has in the browser.
This means by comparing these different options,
this seems to be the preferred choice if applicable.
Now as always, things are not that straightforward.
Therefore it's time to have a look at these different units
now in practice.