CSS Relative Units

CSS Relative Length Units

The ex unit is equal to the current fonts ex height. which is often times the height of the lowercase letter x.

Different fonts have different heights for ex even if their font size is the same.

Using the above css ex relative length unit, the font-size of the paragraph will be 3 times bigger than the normal font-size

The em is a popular unit of measurement that is equal to the computed value of the font size property of the element . When we define our font size an em, one em is equal to the inherited font size,

If we haven't set the font-size anywhere on the page, then it's the browsers default, which is 16 pixels. So by default one em equals 16 pixels, two ems is equal to 32 pixels and so forth. If you set our page's font size to 1 em, it is exactly the same as using 16 pixels for our base font size.

What if we need to make the paragraph font size smaller--let's say equal to 12 pixels. To determine the em value, we'll divide the desired element value which is our paragraph by the parent element font size and pixels, which again in this case is the browser's default size--16 pixels. So 12 divided by 16 gives us a value of 0.75. So for our font size, we will specify 0.75 em as our value.

The css relative em unit is a very useful unit in CSS because it can adapt automatically to the font that the reader chooses to use. An important thing to know when font sizing with em unit is that there is a compounding effect in nested elements.

The css relative rem unit which stands for root em always represent the font size of the root element of the page, which is usually the HTML element. If a font size is specified for the HTML element then all the rem units on the page are relative to that font size.

if we change the font-size of our paragraph from 1 em to 1 rem, the font size of the paragraph will no longer relative to its parent div element. By using the rem unit, we avoid the compounding effect

CSS recently added a new set of units for resizing elements, these units vw, vh, and vmin are referred to as viewport-relative units because they eliminate the dependency on parent elements and instead allow sizing purely based on the viewport size. Each unit's value is equal to 1% or 1100th of the size of the viewport.

Vw stands for viewport width. One vw is equal to 1100th or 1% of the viewport width.

In the above example each div has a width that is 15% of the viewport width. And as you can see, they only resize when we reduce or expand the viewport width.

Much like the vw unit, the vh or viewport height unit is equal to 1% or 1100th of the viewport height. So if we change the div width value to 15 vh, then widths of the div elements will be equal to 15% of the viewport height

The vmin unit is unit is 1100th or 1% of the minimum value between the height and the width of the viewport.

Other Advanced CSS Units you might want to learn

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM