FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 2.8. Les unités en CSS

Les unités

Les unités servent à décrire différentes expressions comme des longueurs ou les couleurs (width, height, font-size, ...).

Il existe deux types d'unités :

Les unités absolues

Le tableau ci-dessous représente les 6 unités absolues servant à décrire des longueurs fixes :

Unité Description Relation
px pixel 96 pixels = 1 pouce
mm millimètre 10 mm = 1cm
cm centimètre 2,54 cm = 1 pouce
in pouce (inch) 1 pouce = 25,4mm = 96 pixels
pt point 72 points = 1 pouce = 96 pixels
pc picas 1 pica = 12 points

Remarque importante : Il ne faut pas mettre d'espace entre la valeur et son unité : 100 px doit être écrit 100px.

Voici un exemple où les 6 déclarations définissent des largeurs identiques dans des unités différentes :

.pixel        { width: 300px; }
.millimetre   { width: 79.375mm; }
.centimetre   { width: 7.9375cm; }
.pouce        { width: 3.125in; }
.point        { width: 225pt; }
.pica         { width: 18.75pc; }

Les unités relatives

Les grandeurs relatives permettent de créer des sites responsifs. Il s'agit de sites dont les pages s'adaptent automatiquement au support sur lequel elles sont affichées. Par exemple, ce site (Le blog à Lulu) est responsif : si vous modifiez la taille de la fenêtre, vous vous appercevrez que sa mise en page s'adapte automatiquement.

Le tableau ci-dessous représente les unités relatives :

Unité Description Remarque
em relatif à la taille de la police de l'élément 2em = 2 fois la taille de la police
rem relatif à la balise racine du document (<html>) 2rem = 2 fois la taille de la police principale
% pourcentage de l'élément parent ou de la valeur max 100% = identique à l'élément parent
vw relatif à la largeur de la fenêtre (Viewport Width) 100vw = la largeur de la fenêtre
vh relatif à la hauteur de la fenêtre (Viewport Height) 100vh = la hauteur de la fenêtre
vmin relatif à la plus petite dimension de la fenêtre 100vmin = min(hauteur, largeur) de la fenêtre
vmax relatif à la plus grande dimension de la fenêtre 100vmin = max(hauteur, largeur) de la fenêtre

Voici un exemple permettant de définir la largeur des éléments qui s'adapteront automatiquement à la taille de la fenêtre.

.half-window  { width: 50vw; }
.half-parent  { width: 33%; }

Voici un autre exemple où les textes de la classe twice seront deux fois plus grands que ceux de leur parent :

.twice { font-size: 2em; }

Voir aussi


Dernière mise à jour : 16/11/2019