Unités CSS et fonctions de calcul : px, em, rem, %, vw, vh, calc(), min(), max(), clamp()

Les unités CSS déterminent comment une valeur est calculée, par rapport à quoi, et comment elle réagit aux changements d’écran, de zoom et d’accessibilité.
Un même nombre n’a pas le même comportement selon qu’il est exprimé en px, rem, % ou vw.

Comprendre ces différences est indispensable pour construire :

des design systems scalables
des interfaces accessibles
des layouts réellement responsives

Catégories d’unités CSS

Toutes les unités CSS appartiennent à l’une de ces trois catégories :

Catégorie	Unités
Absolues CSS	`px`
Relatives au texte	`em`, `rem`
Relatives au conteneur ou viewport	`%`, `vw`, `vh`

Unité px

px est une unité logique définie par le navigateur. Elle ne correspond pas à un pixel matériel mais à une valeur visuelle normalisée.

Propriété	Valeur
Référence	fixe
Impact du zoom	oui
Impact de l’accessibilité	non

Cas d’usage
bordures, séparateurs, ombres, icônes, traits.

À éviter
tailles de texte, marges, grilles, structures de page.

Unité em

1em correspond à la taille de police calculée du parent.

Niveau	Valeur
Parent	16px
Enfant à 1.5em	24px
Petit-enfant à 1.5em	36px

Les valeurs sont multipliées à chaque niveau d’imbrication.

Effet	Conséquence
Cascade	variation exponentielle
Composants	mise à l’échelle locale
Maintenance	plus complexe

Unité rem

rem est une unité relative à la taille de police de l’élément racine <html>.
Contrairement à em, elle ne dépend pas de la hiérarchie DOM et reste stable quel que soit le niveau d’imbrication.

        html {
  font-size: 16px;
}

Valeur `rem`	Taille calculée
1rem	16px
1.25rem	20px
1.5rem	24px
2rem	32px

Toutes les propriétés exprimées en rem sont recalculées lorsque la valeur de html { font-size } change, que ce soit via le zoom navigateur, les préférences d’accessibilité ou une modification explicite dans le CSS.

Unité %

Le pourcentage est toujours calculé par rapport à une valeur de référence.

Propriété	Référence
width	largeur du parent
height	hauteur du parent
font-size	taille du parent
padding	largeur du parent

Unités vw et vh

Unité	Définition
1vw	1% de la largeur du viewport
1vh	1% de la hauteur du viewport

Fonction calc()

calc() permet d’effectuer des opérations mathématiques entre unités différentes.

        width: calc(100% - 2rem);

Fonctions min(), max() et clamp()

calc() permet d’effectuer des opérations mathématiques entre unités différentes.

        width: min(90%, 1200px);

        font-size: max(1rem, 2vw);

        font-size: clamp(1rem, 2vw, 2rem);

Fonction	Rôle
min()	limite haute
max()	limite basse
clamp()	variation contrôlée

En résumé et exemple

Tableau comparatif des unités

Unité	Dépend de	Usage
px	valeur fixe	détails graphiques
em	parent	composants
rem	racine	typographie et layout
%	parent	grilles
vw	viewport	sections fluides
vh	viewport	plein écran

        html {
  font-size: 16px;
}

body {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

.container {
  max-width: min(1200px, calc(100vw - 4rem));
  padding: 2rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

ALEXANDRE

EMERY