Measurement Units 

Forms of measurement

• Absolute

• Relative 

(absolute length units are fixed in relation to each other)

(relative length units specify a length relative to another length property)

Absolute units

• 1px (pixel)    is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length

• 1in (inch) == 96px

• 1cm (centimeter) == 38px

• 1pt (point) == 4/3px

• 1pc (pica) == 16px

Relative units

• % (percent) - A length set in percentage is based on the length of same property of the parent element

• 1em - based on the current typefaces capital letter "M" (font-size)

• 1ex - based on the x-height of the current font

• 1ch - based on the width of the zero (0) character

• vw, vh, vmin/vmax - Viewport Percentage Lengths:
  1vw == 1% viewport width,
  1vh == 1% viewport height,
  vmin/vmax = This value will be whichever is smaller/larger at the moment, vw or vh

• 1rem - always relative to the "root" element

Which CSS measurements to use when

Use for: fixed-width designs; values for CSS shadow displacement. Avoid using when your design needs to adapt.

Don’t use for: typography.

Pixels (px)

Use for: making responsive images and containers.

Don’t use for: typography.

Percentage (%)

Use for: typography, and elements related to typography (margins, for example)

em, ex

Use for: print stylesheets.

Don’t use for: anything else.

Points (pt) and picas (pc), Inches (in) and Centimeters (cm)

Use for:  a more robust and predictable alternative to em and ex, and employed for the same purposes, including @media query breakpoints. 

Don’t use for: if you wish to support IE8 and earlier.

rem

Use for: responsive typography; responsive containers. 

Viewport units (vh & vw)