Absolutely Relative CSS Length Units
I’ve only just recently began to learn how to code in CSS during my own independent studies and it’s been really fun. One thing that wasn’t initially clear to me was why there are so many different units, and what the difference between them are. I’d like to take this time to just run you through a quick summary of some of the more useful length units I learned about while reading through MDN Web Docs and W3 Schools.
Absolute Units
When it comes to absolute units the most important thing to remember is they do not change. Their values are predetermined and for the most part set in stone. That being said there are plenty of absolute units you can use in CSS like metric units, imperial units, etc. But I’m only gonna talk about px(pixel).
Out of all of the absolute units, px is the most well known and for good reason. It’s usually the first unit everyone is introduced to. One px is exactly what it sounds like, the size of one pixel on your display. If every user’s display were always the same dimensions and resolution this wouldn’t be an issue.
Unfortunately that's hardly ever the case. When using any absolute unit you must always be conscious of the fact that the way a web page/app appears in your display. may not be the same in other displays. This can lead to some funky looking unintended results. For this very reason it’s usually in your best interest to not use absolute units unless necessary.
Relative Units
The great thing about relative units, is that they have the ability to scale. With that alone we are now able to create a more flexible code that better shapes to the user’s display. But to what exactly are these units scaling too? The short answer is either It’s a specified font, or the display’s viewport. Just like absolute units there are alot of relative units. So I’m only going to cover the ones I’ve had the joy of using.
Font Relative
As the name implies these relative units scale with the size of certain fonts or font attributes. There are four different font relatives but I’ll only be discussing two, em & rem.
In short em is a unit that is relative to the parent element’s font-size. What that means is if you have a parent element that has a font size of 14px, and it has a property set to the value of 1.25em. Since 1.25em = 1.25 * 14( the parent element’s font size) the child element’s property will be set to a value of 17.5px. The best part about using em is that your child’s properties will scale with the parent tag’s font-size.
The only downside to using em is that it can be a big hassle to go through and manually tweak values if you need varying sizes throughout a set of nested element tags.
Next up we have rem. rem is relative to the root element’s font-size. What that means is if your <html> has a font size of 14px, and an element has a property set to the value of 1.25rem. Since 1.25rem = 1.25 * 14( the root element’s font size) that element’s property will be set to a value of 17.5px.
As you can see rem works exactly like em, the only difference being what its scaling too. Another thing to note. Since rem is scaling to our root element, we don't experience the same issues when using em in nested tags.
Viewport Relative
Unlike font relative units, viewport relatives aren’t dependent on tags or properties of any tag in particular. Instead these units are relative to the dimensions of your viewport and the resolution of your display.
So what is the viewport? In a nutshell the viewport is the portion of your browser that does all the rendering when you visit your favorite web apps. From left to right, top to bottom your viewport is currently filled with text and a light grey colored background. This entire area is your viewport. Adjusting the size of your browser adjusts the values of your windows innerheight(viewport height) and innerwidth(viewport width).
In the picture above you can see how these values changed each time I adjusted the size of my browser. You can see this for yourself by opening up your browser’s built in dev tools and putting the same commands into your console. So how exactly do these units scale to the viewport?
1 vw(viewport width) is 1% of the length of your viewport’s width.
1 vh(viewport height) is 1% of the length of your viewport’s height.
1 vmin(viewport minimum) is 1% of the length of your viewport’s shortest dimension.
1 vmax(viewport maximum) is 1% of the length of your viewport’s longest dimension.
One important thing to know is that our viewport’s height and width are both measured in pixels, this is where our resolution comes in. lets say your viewport’s width is currently the longest dimension with a value of 1680px that means 1vw and 1vmax would equal 16.8px. Since our width is currently our longest dimension that means if our viewport’s height was 971px. both 1vh and 1vmin would be equal to 9.71px.
I know you’re probably tired of me going on about viewport relatives so I’ll wrap this up. As you can see in the photo above our boxes and fonts are completely different sizes from the previous photo. The only thing that has changed is the size of our viewport.
Summary
In short Absolute units never change and Relative units change according to what they relate to. Font relative units scale with predetermined font-sizes. Viewport relative units scale with your viewport’s dimensions. And as you’ve probably guessed by now purple is my favorite color.
I hope this information helps you as much as it has me and you consider experimenting with some of these units next time you find yourself styling your web page/app.
