The various lengths of CSS
Cascading Style Sheets, known as CSS is truly awesome. Before CSS came around, webpages looked pretty boring just like this.
CSS can be used to place elements in different places on a webpage and gives developers the ability to design a webpage any way the want to. You can even use CSS to create awesome animations like the ones below.
CSS can really differentiate a beginner Front-End Developer from a Novice or Expert and is a fantastic tool for all Web Developers to at least have a basic understanding of. CSS is one thing in life that follows the “pretty easy to use, but extremely difficult to master” paradigms.
When I am building a UI for a project and need to adjust the size of an element, I typically use either px or % as my length unit. While trying to improve my CSS skills, I quickly realized there are TONS of units for lengths besides for my % and px values.
Lets start by explaining that CSS has two totally separate kinds of lengths: Absolute Lengths and Relative Lengths.
Absolute Length Units are fixed. This means that they will appear the exact size you assign them.
Relative Length Units are not fixed, rather they are relative to another length property.
Overall, relative units scale much better between different devices with different screen sizes and resolutions because they scale and are not fixed. This allows elements to grow and shrink depending on the size of the device that is being used. Because of this we will dive deeper into the various types of relative lengths units you can use in CSS.
Lets start with % because it was the unit I was most used to using before this. A % means that the length of the element will be relative to the parent element. So if you put make a div with no parents have a width of 50%, it’s width would span exactly half the screen, however if it has a parent element, the width would be exactly half the width of that parent element.
Next up is vw. Its very similar to %, however, it does not care about the size of it’s parent element. 50vw will be exactly half the width of the screen (or viewport) whether it has a parent element or not.
Similar to vw, we have vh, which means that it is relative to the height of the screen. 50vh will be exactly half the height of the viewport whether the element has a parent element or not.
Now we have interesting ones vmin and vmax. Typically computer screens are landscape while mobile device screens are portrait. vmin is relative to the smaller dimension of the viewport, and vman is relative to the larger dimension of the viewport. One of the authors of CSS-Tricks.com believes that using vmin and sizing based on the minimum of the viewport often feels right for both mobile and desktop viewing rather than solely basing it on the width or height of the viewport.
Next up we have em and rem. Which share some DNA with % and vw or vh. A rem is relative to the font size of the root element of the page. 2rem would be twice the font size of the browser, while 3rem would be triple the size. An em is similar, however, instead of being relative to the font size of the root element, it is relative to the current font, which can be thought of as the parent element. Something with 2em would have double the font size of the current font. If it’s child has 0.5em then its size would be the same as it’s grandparent!
A ch is relative to the width of the 0 (zero) character and yes you heard that right. It literally uses the width dimension of the zero character and it does take into account any changes to the font-family.
Lastly we have ex, which W3Schools considers “Rarely Used”. It is relative to the x-height of the current font.
Here’s a quick table to sum everything up.
