1
00:00:02,040 --> 00:00:05,070
So pixels will not bring us closer

2
00:00:05,070 --> 00:00:07,620
to a more responsive design,

3
00:00:07,620 --> 00:00:11,900
to a more adaptive design in our website.

4
00:00:11,900 --> 00:00:14,740
For this, we need more dynamic units

5
00:00:14,740 --> 00:00:17,780
which are scalable in the end.

6
00:00:17,780 --> 00:00:20,240
We have three different unit types

7
00:00:20,240 --> 00:00:22,600
to choose from for this purpose.

8
00:00:22,600 --> 00:00:24,350
We have percentages,

9
00:00:24,350 --> 00:00:27,160
which we also use throughout the course already.

10
00:00:27,160 --> 00:00:31,030
We have em which stands for ephemeral unit.

11
00:00:31,030 --> 00:00:33,110
We'll dive deeper into what this means

12
00:00:33,110 --> 00:00:34,970
and how it works in the next minutes.

13
00:00:34,970 --> 00:00:37,160
And we have rem.

14
00:00:37,160 --> 00:00:40,110
Rem stands for root ephemeral unit,

15
00:00:40,110 --> 00:00:44,850
so this seems to be kind of related to the em unit.

16
00:00:44,850 --> 00:00:47,403
What are these units about now?

17
00:00:48,380 --> 00:00:51,175
Well, the percentage unit is relative

18
00:00:51,175 --> 00:00:54,320
to the parent elements size.

19
00:00:54,320 --> 00:00:57,937
Talking about the font size property here in particular,

20
00:00:57,937 --> 00:01:02,470
this means that if we set a percentage value for the font

21
00:01:02,470 --> 00:01:04,572
size of our current element,

22
00:01:05,480 --> 00:01:10,480
then this percentage value will refer to the font size of

23
00:01:10,660 --> 00:01:14,610
the parent element of our current element that we are

24
00:01:14,610 --> 00:01:16,200
working on.

25
00:01:16,200 --> 00:01:19,000
This has one disadvantage though.

26
00:01:19,000 --> 00:01:22,780
The disadvantage is the management of the sizes,

27
00:01:22,780 --> 00:01:25,340
the font sizes (indistinct) then.

28
00:01:25,340 --> 00:01:29,200
Because this cascading nature we have if size,

29
00:01:29,200 --> 00:01:32,709
percentage size, depends on the parent element size

30
00:01:32,709 --> 00:01:37,630
can become quite cumbersome quickly, because the more units

31
00:01:37,630 --> 00:01:39,983
we have, the more font sizes we apply,

32
00:01:39,983 --> 00:01:43,740
well the more complex our structure becomes.

33
00:01:43,740 --> 00:01:46,830
We might have many nested elements in here and therefore

34
00:01:46,830 --> 00:01:51,610
managing sizes with percentage units can cause some issues

35
00:01:51,610 --> 00:01:52,743
from time to time.

36
00:01:53,840 --> 00:01:55,910
What about the alternative though,

37
00:01:55,910 --> 00:01:57,073
M and REM?

38
00:01:58,070 --> 00:02:00,480
M is a size

39
00:02:00,480 --> 00:02:04,330
that is relative to the font size.

40
00:02:04,330 --> 00:02:06,840
You see this sounds kind of (indistinct).

41
00:02:06,840 --> 00:02:08,410
This also has reasons

42
00:02:08,410 --> 00:02:12,450
because here the property is important.

43
00:02:12,450 --> 00:02:16,640
So using M for the font size means that the size,

44
00:02:16,640 --> 00:02:20,003
the font size, depends on the parent element size

45
00:02:20,003 --> 00:02:25,003
using the M unit in another context with other properties.

46
00:02:25,300 --> 00:02:27,111
The which property you have, for example,

47
00:02:27,111 --> 00:02:30,600
well then this does not necessarily hold.

48
00:02:30,600 --> 00:02:34,180
Therefore we'll just keep in mind that for the M unit the

49
00:02:34,180 --> 00:02:39,133
size is relative to the font size of another element here.

50
00:02:40,380 --> 00:02:43,240
This has again, the same disadvantage.

51
00:02:43,240 --> 00:02:46,180
We have another cascading nature.

52
00:02:46,180 --> 00:02:50,060
So the size depends on an inherited size,

53
00:02:50,060 --> 00:02:53,093
which can cause confusion from time to time.

54
00:02:54,840 --> 00:02:57,950
For REM things are a bit different.

55
00:02:57,950 --> 00:03:00,030
REM means that the size,

56
00:03:00,030 --> 00:03:02,700
the font size here of our current element,

57
00:03:02,700 --> 00:03:04,711
where this REM unit is applied,

58
00:03:04,711 --> 00:03:09,560
is relative to the root elements, font size.

59
00:03:09,560 --> 00:03:12,610
The root element is the HTML element.

60
00:03:12,610 --> 00:03:15,930
This at first sounds pretty straightforward.

61
00:03:15,930 --> 00:03:19,070
So you always calculate the size depending

62
00:03:19,070 --> 00:03:21,550
on the root element size.

63
00:03:21,550 --> 00:03:23,825
And if you don't add a specific size

64
00:03:23,825 --> 00:03:27,010
for the font size in this root element,

65
00:03:27,010 --> 00:03:31,160
well then the size always is relative to the current setting

66
00:03:31,160 --> 00:03:33,343
that the user has in the browser.

67
00:03:34,330 --> 00:03:36,787
This means by comparing these different options,

68
00:03:36,787 --> 00:03:41,560
this seems to be the preferred choice if applicable.

69
00:03:41,560 --> 00:03:44,970
Now as always, things are not that straightforward.

70
00:03:44,970 --> 00:03:48,110
Therefore it's time to have a look at these different units

71
00:03:48,110 --> 00:03:49,733
now in practice.