Those units do not attempt
to match the physical counterpart.
Two are defined relative cm,
1mm = 0.1cm,
and 1q = 0.025cm.
In turn the CSS centimeter and inch
are both tied to a fixed pixel length, at
1cm = 37.8px, and
1in = 96px.
The user-agent scaling, in particular
for web browser inference of the
DPI/PPCM pixel density, can detach the
units making the resulting lengths
different than the expectation;
using pixels directly is a good alternative.
Absolute Length Units
The upside of the pixel is its similar
footprint on the end media, both print
and screens of any viewport size with
default settings. High DPI, Retina screens
scales a line 1px thick
to use multiples of physical pixels.
It naturally extends the browser defaults,
e.g. the embedded media width defaulting
at 300px.
Picas and Points derive
from 1in
respectively 1/6th and 1/72th.
As with traditional typographic units,
a pica equals twelve points.
However the CSS pica and points
are defined relative 1px
(respectively 1.333 and 16px).
Angle Units
There are four angle units.
One full-circle angle is 1turn.
Degrees and radians are contained resp.
360 and 2π times within as the mathematical
definitions; noted 1deg,
1rad. The fourth angle unit
is the gradian, centesimal system for right-angles
i.e. 1grad == 0.9deg == π/200rad.
or 400grad == 1turn == 2πrad.
The bearing-angle convention is prescribed
by the specifications, making angle
direction clockwise;
from a zero in the north/up direction.
All angle units can be used interchangeably
in angle-specific contexts.
Font-Relative Length Units
Defined relative to the font-size
of the element targeted by the declaration,
1em and 1ex correspond
to the body-height of the related glyph -
uppercase M, lowercase x.
Hence 1em > 1ex.
The line-height relative the element text is equal 1lh,
being the font-size or 1em plus the leading,
when specified as a length; or times the leading,
when specified as a unitless scalar.
The root-relative duals rlh
and rem
are more useful to express layouts, margins
in integer multiples of
1rlh, creating alignment
of paragraphs and other interface items;
in nodes where 1lh may not
be the starting document line-height.
Same principle for 1rem
versus 1em.
Viewport-Relative Length Units
Those unit lengths are in proportion to
the current viewport dimensions.
Four exist, vw and vh
for width and height; and vmin
and vmax as result of the
matching operation on the dimension pair.
They represent percentages of the underlying,
making the viewport 100vw x 100vh.
They are useful for implementing responsive
designs, full-screen and scale/zoom invariant
sizing; which can be useful to make overlays
in applications that use the browser viewport
as a movable window; or responsive text sizing.
NB. sizing text in viewport relative units
is discouraged for accessibility.