If you've been working on the backend for a while, you may have forgotten CSS units that are used today. To give you a quick refresher, let's jump straight into it.
Rem
Most of the CSS frameworks like Tailwind use rem as the base unit. You may know that this is a relative unit, but relative to what? It's relative to the root element html
In Chrome, but in other browsers also, you have a setting that lets you set the default font size.
This setting will set the font size of the root element, and anything else will be derived from that. In case you are using pixels, this setting wouldn't have any effect, so pixels aren't the best option for accessibility.
p {
font-size: 1rem;
}
Em
em is just like rem but relative to the parent element instead of the root element.
vw
No, it doesn't stand for Volkswagen :) It's a percentage of the viewport's width. If you, for example, want 1/4 of the viewport's width, you would write.
div {
width: 25vw;
}
vh
It's the viewport's height. If you want half of the viewport's height, you will write.
div {
width: 50vh;
}
Conclusion
It's not necessary to explain the obvious units likes px, %, and pt since you're probably familiar with them.
I hope these quick tips helped you refresh your memory, and maybe you even learned something new.