lengths

The CSS data type apples to distant measurements for the following CSS properties: width, height, margin, padding, font-size, border-width, text-shadow etc..
There are two types of length units: relative and absolute.

Relative units

Font-relative lengths:

  1. em
  2. ex
  3. ch
  4. rem

Viewport-percentage length:

  1. vh
  2. vw
  3. vmin
  4. vmax

em
Relative to the font-size of the parent element. 3 em means 3 times the size of the font that has its parent.

ex
Relative to the x-height of the current font.

ch
Relative to width of the “0” (zero, the Unicode character U+0030) in the element’s font.

rem
Relative to font-size of the root element (html).

em and rem units are used to create scalable layouts.

Viewport-percentage

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of document.

vw
Relative to 1% of the width of the viewport

vh
Relative to 1% of the height of the viewport

vmin
Relative to 1% of viewport’s smaller dimension: between the height and the width of the viewport.

vmax
Relative to 1% of vieport’s larger dimension: between the height and the width of the viewport.

Absolute units

  • in – inches 1in = 2.54cm = 96px
  • cm – centimeters 1cm = 37.8px
  • mm – milimeters 1 mm = 0.1cm = 3.78px
  • pt – points – the points used by CSS are equal to 1/72nd of 1in.
  • pc – picas – 1pc = 12pt.
  • px – pixel – 1px = 0.75pt

px
Pixels have nothing to do with the screen pixels. Pixels (px) are relative to the viewing device: low-dpi devices or high resolution screens. Now we have CSS px which is a Angular Measurement.

Examples

The em unit

The HTML code


<div class="box-units units-parent">
    <div class="box-units units-em">The CSS....</div>
</div>

The CSS properties

div.units-parent {
    font-size: 10px;
}
div.units-em {
    font-size: 2em;
}

The result

The CSS rule for this element is: font-size: 2em.
The font-size of the parent element (div) is equal 10px, so 2em is equal 2 * 10 = 20px.

The rem unit

The HTML code

<div class="box-units units-parent">
    <div class=" units-rem">The CSS rule....</div>
</div>

The CSS code


div.units-rem {
    font-size: 2rem;
}

The result

The CSS rule for the html element is: font-size: 100%, so the font size of the html element is equal to the default value of the browser – .
The CSS rule for this div element is: font-size: 2rem; so the font size is equle

Viewport-percentage lengths

Data about viewport dimenstions:

vw

The CSS property

div {
    font-size:4vw;
}

vh

The CSS property

div {
    font-size:4vh;
}

vmin

The CSS property

div {
    font-size:4vmin;
}

vmax

The CSS property

div {
    font-size:4vmax;
}

Resources
MDN

Browser compatibility

font-size: ... rem;

Internet Explorer
11
Firefox
works
Chrome
works
Safari
9
Opera
34
Mobile
Safari Mobile
8.4
Android
4.3
Chrome Mobile
47
IE Phone
works
Opera Mobile
works
Notes

IE9 and IE 10 not support rem units in font shorthand property and when used on pseudo elements.
IOS Safari 5.0-5.1 doesn't support rem in media queries.