Les unités CSS expliquées : px, rem, em, vh — et quand utiliser chacune
Choisir la mauvaise unité CSS provoque des mises en page qui se cassent selon la taille de l'écran, des polices qui ignorent les préférences utilisateur et un espacement incohérent. Voici un guide pratique pour choisir la bonne unité à chaque fois.
Pourquoi les unités CSS sont importantes
Le CSS possède plus d'une douzaine d'unités de longueur, mais la plupart des développeurs en utilisent cinq en pratique : px, rem, em, %, et les unités de viewport vh et vw. Choisir la mauvaise unité n'est pas toujours évident — la mise en page peut sembler correcte sur votre écran et se casser sur celui d'un autre, ou réussir un contrôle visuel (QA) mais échouer à un audit d'accessibilité parce qu'elle ignore la préférence de taille de police de l'utilisateur.
Ce guide explique ce que mesure chaque unité, vous donne une règle de décision concrète pour chaque situation, et couvre les erreurs qui reviennent régulièrement lors des revues de code.
px — Pixels Absolus
Un px CSS correspond à un pixel indépendant du matériel, pas nécessairement à un pixel physique de l'écran. Sur un écran Retina 2x, un px CSS est rendu en utilisant 2 pixels physiques. Cela signifie que le px est cohérent d'un écran à l'autre en termes de taille visuelle, mais il est absolu — il ne s'adapte à rien.
Quand utiliser px :
- Bordures :
border: 1px solid— une bordure de 1px doit toujours ressembler à un trait fin, quel que soit le contexte - Ombres de boîte et contours : détails de précision qui ne devraient pas s'adapter
- Points de rupture des Media Queries :
@media (min-width: 768px) - Éléments décoratifs de taille fixe (icônes avec une taille définie, séparateurs)
Quand ne pas utiliser px : tailles de police, padding et margin. Un utilisateur qui règle la taille de la police de son navigateur sur 20px parce qu'il a des difficultés à lire les petits textes ne profitera pas de votre mise en page si tout est codé en dur en px. Sa préférence sera totalement ignorée.
rem — Root Em
rem signifie "root em". Il est toujours relatif au font-size de l'élément html, jamais au parent. Cela le rend prévisible d'une manière que le <em n'est pas.
Par défaut, la plupart des navigateurs règlent la taille de police racine à 16px. Ainsi :
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
Quand utiliser rem :
- Tailles de police — le rem respecte la préférence de police du navigateur de l'utilisateur
- Espacement qui doit s'adapter proportionnellement à la taille du texte (padding, margin, gap)
- Dimensionnement de composants lorsque vous voulez que tout s'adapte ensemble
L'astuce des 62.5% : Certains développeurs règlent <html { font-size: 62.5%; } pour que 1rem soit égal à 10px (puisque 62.5% de 16px = 10px). Cela simplifie le calcul mental : <1.4rem = 14px. Le compromis est qu'il écrase la préférence de police de base de l'utilisateur, à moins de l'utiliser avec précaution — ne faites cela que si vous comprenez les implications pour l'accessibilité et si vous surchargez au niveau du composant.
em — Relatif au Parent
<em est relatif à la taille de police calculée de l'élément actuel (ou du parent, lorsqu'il est appliqué à la taille de la police elle-même). Cela le rend utile pour les composants qui doivent s'adapter proportionnellement à leur propre taille de texte.
Cas d'utilisation classique : padding de bouton. Si vous écrivez <padding: 0.5em 1em, le padding du bouton s'adapte automatiquement lorsque vous changez la taille de police du bouton — les petits boutons obtiennent un padding plus petit, les grands plus grand.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* padding scales automatically */ }
Le problème de composition : Lorsque vous imbriquez des éléments avec des tailles de police en em, elles se multiplient. Un parent à <1.2em et un enfant à <1.2em donnent à l'enfant une taille effective de <1.44em. C'est pourquoi le rem est privilégié pour les tailles de police dans la plupart des cas — le rem se réfère toujours à la racine, donc l'imbrication ne se multiplie pas.
Quand utiliser em : padding, margin et line-height sur des composants où vous voulez que les dimensions suivent la propre taille de police du composant. Évitez l'em pour la taille de police dans les composants imbriqués.
% — Pourcentage
Le pourcentage est toujours relatif à la dimension correspondante de l'élément parent. Les pourcentages de largeur sont relatifs à la largeur du parent ; les pourcentages de hauteur sont relatifs à la hauteur du parent (avec des réserves).
Il est particulièrement utile pour les mises en page fluides : <width: 100% signifie "occuper toute la largeur disponible". Utilisé avec max-width, il crée des conteneurs réactifs :
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Pour la taille de la police, le pourcentage se comporte comme em — il se multiplie avec le parent. Utilisez rem à la place pour des résultats plus prévisibles.
vh, vw — Unités Viewport
<1vh = 1% de la hauteur du viewport. <1vw = 1% de la largeur du viewport. Ils ne dépendent d'aucun élément — ils se réfèrent toujours à la taille de la fenêtre du navigateur.
Quand utiliser les unités viewport :
- Sections plein écran : <
height: 100vhpour un hero qui remplit exactement l'écran - Typographie fluide : <
font-size: clamp(1rem, 2.5vw, 2rem)pour du texte qui s'adapte en douceur entre les tailles d'écran sans media queries - Images ou vidéos en pleine largeur : <
width: 100vwpour sortir d'un conteneur
Le problème de la barre du navigateur mobile : Sur les navigateurs mobiles, la barre d'adresse apparaît et disparaît lors du défilement, modifiant la hauteur du viewport. <100vh peut causer une coupure du contenu ou créer des barres de défilement. Le CSS a ajouté <dvh (dynamic viewport height), <svh (small — barre d'adresse visible) et <lvh (large — barre d'adresse masquée) pour gérer cela. Le support des navigateurs pour dvh est bon en 2024+. Utilisez <height: 100dvh pour les mises en page plein écran sur mobile.
Le guide de décision des unités CSS
| Ce que vous dimensionnez | Utilisez ceci | Pourquoi |
|---|---|---|
| Taille de police du corps / globale | rem | Respecte la préférence de l'utilisateur, pas de multiplication |
| Taille de police du composant | rem | Cohérent, prévisible |
| Padding / margin du composant | em ou <rem> | em si vous voulez qu'il suive la taille de police ; rem pour la cohérence |
| Bordures, ombres portées | px | Ne doivent jamais s'adapter |
| Points de rupture des Media Queries | px ou <em> | px pour la simplicité ; em pour que les points de rupture s'adaptent aux préférences de police |
| Largeur fluide du conteneur | % + <max-width> | Prend l'espace disponible, plafonne au maximum |
| Section hero en pleine hauteur | 100dvh | Prend en compte les barres des navigateurs mobiles |
| Typographie fluide | clamp() avec rem + vw | S'adapte en douceur entre les points de rupture |
Les erreurs les plus courantes
1. Utiliser px pour toutes les tailles de police. Cela nuit à l'accessibilité. Les utilisateurs qui augmentent la taille de base de la police de leur navigateur trouveront votre texte inchangé. Utilisez rem pour les tailles de police afin que l'interface respecte cette préférence.
2. Utiliser em pour les tailles de police dans les composants imbriqués. Le problème de composition se produit ici. Un menu à l'intérieur d'une carte à l'intérieur d'une modale peut finir avec une multiplication par 3. Utilisez rem pour les tailles de police.
3. Utiliser vh pour les mises en page plein écran sans fallback dvh. Sur mobile, la barre d'adresse provoque des changements de mise en page (layout shifts). Utilisez <min-height: 100svh ou <height: 100dvh>.
4. Oublier que la hauteur en % nécessite un parent avec une hauteur explicite. <height: 100% sur un enfant n'a aucun effet si le parent a <height: auto>. Utilisez <vh ou Flexbox à la place.
La formule de conversion px → rem
La taille de police racine par défaut est de 16px. La formule pour convertir :
Exemple :
24px ÷ 16 = 1.5rem
Si vous travaillez avec un outil de conception qui génère des pixels, notre Convertisseur PX vers REM gère le calcul instantanément. Collez n'importe quelle valeur en px (ou une liste de valeurs) et obtenez l'équivalent en rem, avec la possibilité de personnaliser les tailles de racine.
Convertir px en rem instantanément
Collez n'importe quelle valeur en pixels et obtenez l'équivalent en rem. Supporte les tailles de police de base personnalisées.