Dans un fichier CSS, de nombreuses propriétés cohabitent : des typographies, des couleurs, des valeurs numériques, etc. Certaines d’entre elles ont besoin d’être associées à une unité et ce choix est loin d’être anodin.

Il existe plusieurs types d’unité, et chacun influence à sa manière le design de votre site. Si vous ne savez pas comment choisir entre le “px”, le “em”, ou encore le “vw”, alors vous tombez bien. Nous allons faire un point sur les unités de mesure en CSS pour que vous puissiez les utiliser correctement.

Les unités absolues

Il existe des unités en CSS qui ne sont influencées par aucune autre dimension. Appelées unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.

Les unités absolues sont les suivantes :

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.box {
width : 150px ;
height : 150 px ;
}

Cela signifie que l’élément box aura la même dimension (150 x 150 pixels), quelle que soit la taille de l’écran.

Les unités relatives au texte

À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments d’un design. On retrouve :

Parmi ces unités relatives au texte, vous serez amené à utiliser le em. Cette unité de mesure permet de garder un texte lisible. Autre avantage, si vous souhaitez modifier la taille de votre police d’écriture, vos éléments enfants s’ajusteront automatiquement.

Les unités relatives au viewport

D’autres unités permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.

Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive, et on retrouve :

Les unités vh et vw

Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.

Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.

L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :

.box {
height :100vh ;
background : red ;
}

Dans cet exemple ci-dessus, l’élément box a une hauteur de 100 % par rapport à la hauteur de la fenêtre de navigation.

Prenons un autre exemple :

h1{
font-size : 6 vw ;
}

Ici la taille du titre H1 correspond à 6 % de la largeur de la fenêtre. Par conséquent, si cette dernière est de 1000 px, la taille de la police sera de 60 px.

Les unités vmin et vmax

Ces deux unités de mesure en CSS fonctionnent selon le même principe.

Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte. Par exemple, si ce dernier est de 1000 px de haut par 800 px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.

Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.

Les unités en pourcentage

Le pourcentage fait partie des unités relatives de façon générale puisqu’il s’adapte en fonction de son élément parent.

La plupart du temps, cette unité est utilisée pour définir la hauteur et la largeur d’un élément. Vous la retrouverez notamment dans le framework Bootstrap.