Hello Fellow Codenewbies 👋,
There are many factors to consider when we think about responsiveness in CSS.
One of them is CSS Units.
There are two types of units:
- Absolute
- Relative - to the size of font (em, rem, etc.) and viewport (vh, vw, etc.)
Absolute Unit
Regardless of its parent's or screen size, absolute units are always the same size.
px, cm, inch, etc. are within this category.
<body>
<div class="absolute"></div>
<div class="relative"></div>
</body>
.absolute {
background-color: green;
width: 640px;
height: 100px;
}
.relative {
background-color: red;
width: 90%;
height: 6em;
}
Try to shrink and expand the window and see the difference in the above example.
Relative Unit
Percentage
The percentage is mainly used for widths, and it is relative to the target element's parent.
<body>
<header>
<h1>Hello World</h1>
</header>
</body>
header {
width: 80%;
}
h1 {
width: 50%;
}
In the above example, the width of the header
is 80% of the body
.
And the width of h1
is 50% of header
.
em
em
inherits size from its parent.
<div class="container">
<h1>Hello World</h1>
</div>
.container {
font-size: 12px;
}
h1 {
font-size: 2em;
}
The font size of h1
is 2x its parent (container
), making it 24px.
But there is one problem with em
.
Because it is relative to its parent, it can create a cascading effect.
Click the CSS button on the CodePen to see the code.
As you can see in the result, the fonts of li
are bigger than h1
. But their font size is smaller than h1
.
How does this happen?
Let's break them down.
- We set the font size of
body
as the parent ofh1
andul
to 18px. - Then we set the font size of
h1
to 2em. It now makes the font size ofh1
twice bigger thanbody
. - Let's leave
h1
and move to its sibling,ul
. We set its font size to 1.5em. As you can guess, the size of theul
is now 1.5x bigger the parent. - Then we set the font size of
li
to 1.5em. It makesli
now 1.5x bigger thanul
. Remember thatul
is already 1.5x bigger thanbody
. So,li
is 3x bigger than its grandparent, thebody
.
When it's about font-size
, we better avoid the use of em
and use rem
instead.
rem
rem
stands for "root element," and it is always relative to the "root" of the document, which is the html
element.
Because we use rem
, even though the font size of body
is 50px, all font size is changed relative to html
as the root element.
Picking Which Unit To Use
It depends on your personal preference and what you need, but here is a reference of approaches on when to use one:
- font-size:
rem
- margin and padding:
em
- width:
em
orpercentage
or absolute unit such aspx
Thank you for reading!
Last, you can find me on Twitter. Let's connect! 😊
Top comments (8)
Great article, been trying to wrap my head around this for awhile and this was nice and concise. Question so just to make sure I understand REM is like EM except child containers only base their sizes on the root document? Is that always html?
Thank you for reading and for the feedback, Josh.
And I'm happy if it could help you 😊
Yes, with
rem
(root em), children base their size on the root element.And the root element is always
html
.You can find the explanation here
I hope this helps 🙂
Nice article. Simple to understand and well explained.
Thank you! I'm glad go hear that 😊
Terimakasih mba Ayu..
Sama-sama, mas Fadli
Pretty helpful article. Thank you 🙌🌹🌹
Thank you for reading!