Unités

Unités absolues

L'unité par défaut est le pixel css. 1 pouce contient 96px quelque soit le support. Sur les imprimantes une image de 96 pixels ferra exactement 2,54 cm (1 pouce). Sur les support basse résolution 1 pouce css ne correspondra pas à 1 pouce réel. Le pixel css ne peut pas être inférieur au pixel réel ce qui devrait être le cas. Par contre 1 pixel css peut correspondre à plusieurs pixels réels appelé points. Sur une imprimante de 288 pp 1 pixel css = 288 / 96 = 3 points. Les écrans retina aussi. Un écran de 196 dpi 1 pixel = 192 / 96 = 2 points

{ width: 96px; height: 96px }

96 px

{ width: 1in; height: 1in }

1 pouce
1 pouce = 96 px

{ width: 25.4mm; height: 25.4mm }

25,4 mm
1 pouce = 25,4 mm

{ width:2.54cm; height: 2.54cm }

2,54 cm
1 pouce = 2,54 cm

{ width: 72pt; height: 72pt }

72 points
1 pouce = 72 points

{ width: 6pc; height: 6pc }

6 picas
1 pica = 12 points
6 picas = 72 pixels

Viewport-percentage

{ width: 100% }

10 %

1vw = 1% of viewport width 1vh = 1% of viewport height

{ width:10vw }

10 vw

1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger

{ width:10vmin }

10 vmin

{ width:10vmax }

10 vmax

Font relative

Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units

{ width: 1em; }

{ width: 1rem; }

{ width:1ex; }

{ width:1ch; }

&mdash;

—