CSS supports a number of measurements including absolute units such as pixels, inches, centimeters, points, and so on, as well as relative measures such as percentages and em units.
The absolute units are fixed in relation to each other and a length expressed in any of these will appear as exactly that size.
|in||inches (1in = 2.54cm = 96px)||Demo|
|pt||points (1pt = 1/72 of 1in)||Demo|
|pc||picas (1pc = 12 pt)||Demo|
A relative unit gets sizing from something else. In the specification the relative length units are defined as em, ex, ch and rem. These are font-relative lengths. The specification also defines a % value, which is always relative to another value.
Using relative values means that things can scale up and down according to some other value.
|%||Relative to the parent element, eg. 200% = 28px if parent element's font-size is 14px||Demo|
|em||Relative to the parent element, eg. 2em = 28px if parent element's font-size is 14px||Demo|
|ex||Relative to the x-height of the current font||Demo|
|ch||Relative to width of the "zero"|
|rem||Relative to font-size of the root element (<html>)||Demo|
|vw||Relative to 1% of the width of the viewport (window size)||Demo|
|vh||Relative to 1% of the height of the viewport (window size)||Demo|
|vmin||Relative to 1% of viewport's smaller dimension||Demo|
|vmax||Relative to 1% of viewport's larger dimension||Demo|