Let's briefly learn about CSS units!
px (absolute)
Avoid using 'px' for font-size. Use for small details, like shadow or borders.
% (relative)
Good to use for layouts and width/height.
- size is defined as percentage of the value of the mostly parent element.
.example {
font-size: 20 px;
line-height: 50%; /* 10px */
}
em (relative)
Can be used for font-size and margin/padding. This will adjust this properties based on that element's font size.
- changes behavior based on property
- 'em' = parent font-size
- if parent don't have a size, defaults to 16px (body)
.parent-div {
font-size: 10px;
}
.list-item {
font-size: 2em; /* 10px * 2 or 20px */
}
Rem (relative)
You can also use 'rem' for font-size and margin/padding. 'rem' is easier to work with than 'em', because it's more consistent.
- Relative to hoot HTML, no matter what(default is 16px)
- You can change the root HTML size. For example, if you change it to 20px, 1 'rem' will always be 20px.
html {
font-size: 10px;
}
p{
font-size: 1.5rem;
}
Here we've set the HTML default size to 10px. So, 1.5 rem is 15px. 2rem will be 20px instead of default 32px.
vw/vh (relative)
ww/vw are relative to the width/height of the browser window. 100vw means full width of the screen. Use vw/vh for bigger layouts, like background.
- very useful for responsive websites because everything scales.
ch (relative)
'ch' is relative to the width of the number 0 of the current font.'ch' is used to size the width of a paragraph. In general, you want a 45-70 character wide column for readability.
- You would use it like this:
- max-width: 20ch;
This set the width of the column to a maximum of 20 characters per line.
this is hard to remember, so...
Like and Save this post
credits to Sai Pranay for the inspiration.
Top comments (0)