I’m dumb. I watched some videos on it and maybe it’s just the way they talk or the way they explain it, but I don’t fully get why to use em and rem units vs pixels.
Note: I do use tailwind and am happy I don’t really have to think about it 🙂 but without it I pretty much always use pixels instead lol.
In: Technology
I’m no dev, but after reading one page about it, it sounds pretty simple to me.
Pixels (px) is absolute, it will just use that regardless of any other settings.
rem, is a variable that starts with whats set in the root element. So 1rem = root element. So you base your sizing in rem units off of what the root element is, so its effectively a parent and child. If the root element size (in px) changes, so will your rem values, based on what they are. So if the root element value is 20px, 1rem is also 20px. If you change rem to .5, then that equates to 10px.
Its a way to keep a ‘master’ value that can be set at a top level, and have all your page values be relative to that.
em, is similar, but works under a single element. So rather than 1em equating to the root element of 20, its equal to the current element value.
Using them lets you keep a root value (that could be set in the browser by the user), and change your page relatively to that. Not an absolute change.
Latest Answers