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 : leur grandeur est fixe
les unités relatives : leur grandeur est relative à un autre élément

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; }

Tester l'exemple en ligne

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 de 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%; }

Tester l'exemple en ligne

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; }

Tester l'exemple en ligne

Exercice

Considérons le code HTML suivant:

<div id="alert">This is an alert</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

Ajouter des styles CSS afin d'afficher le code précédent conformément à la prévisualisation suivante:

Faire l'exercice en ligne

Solution

Quiz

Quelle est l'unité du pixel en CSS ?

pix

Vérifier

En CSS, que signifie l'unité vw ?

Volkswagen

view window

viewport width

virtual width

Vérifier

Une unité relative ...

... est toujours de la même taille, quelque soit l'écran ou le média.

... peut être proportionnelle de la taille de la fenêtre.

... peut être proportionnelle à la taille standard de la police de caractères.

... peut être proportionnelle à l'élément parent.

Vérifier

Quelle(s) syntaxe(s) permet(tent) de fixer la hauteur d'un élément à la moitié de la largeur de la fenêtre ?

height: 0.5vw

height: 0.5vh

height: 50%

height: 50vw

Vérifier

Cours 2.7 Sommaire Cours 2.9

Voir aussi

Dernière mise à jour : 25/11/2021