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