Absolutely Relative CSS Length Units

Photo by Pankaj Patel on Unsplash

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

Photo by Jeremy Zero on Unsplash

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

Font Relative

notice how em and rem are different sizes

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.

nested ul tags with their font-sizes set to 1.25em

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.

nested ul tags with their font-sizes set to 1.25rem

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

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).

My viewports height and width at various shapes and sizes.

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.

The viewport was maximized when this screenshot was taken, so the height is the shorter 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.

The viewport was minimized when this screenshot was taken. the height is still the shorter dimension.

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.

Working hard and staying hydrated.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store