Convertisseur d’unités CSS (px / rem / em / vh / vw)

Pourquoi utiliser rem plutôt que px

Les navigateurs commencent à 16px, mais les personnes malvoyantes augmentent souvent la taille de police par défaut dans les paramètres de leur navigateur. Un texte dimensionné en rem grandit avec ce réglage ; un texte dimensionné en px ne grandit pas. Le zoom de la page agrandit les deux, mais c'est le réglage de la taille de police sur lequel de nombreux lecteurs comptent, et le critère de redimensionnement du texte des WCAG exige une mise à l'échelle jusqu'à 200 % sans perte de contenu. Dimensionnez le texte et l'espace qui l'entoure en rem, et réservez px aux traits fins et aux bordures.

La colonne em et l'imbrication

Un em est relatif à la taille de police propre de l'élément ; pour font-size lui-même, il est relatif à celle du parent. Les valeurs em indiquées ici supposent que le parent utilise la taille racine, ce qui n'est vrai qu'au niveau supérieur. Dans un élément 0.875em, 0.875em donne à nouveau 12.25px, et non 14px, et la réduction se cumule. C'est pourquoi rem constitue la valeur par défaut la plus sûre, tandis que em convient aux espacements qui doivent évoluer avec le texte du composant.

La base à 62,5 % et les unités de fenêtre

Définir html { font-size: 62.5% } fait correspondre 1rem à 10px, ce qui simplifie les calculs ; saisissez 10 comme taille de base pour obtenir le même résultat. Cela réduit tout le reste dimensionné en rem, y compris les composants tiers : définissez donc à nouveau une taille lisible sur body.

Les valeurs vw et vh supposent une fenêtre de 1440 × 900. Sur les téléphones, 100vh peut dépasser la zone visible lorsque la barre d'outils du navigateur est affichée ; 100svh et 100dvh sont les unités qui en tiennent compte.

Comment l'utiliser

1. Saisissez une valeur en pixels (px) et la taille de base racine (par défaut 16px).
2. Consultez les valeurs rem, em, vw et vh calculées.
3. Copiez les extraits CSS prêts à l’emploi ou consultez le tableau d’échelle.

Confidentialité et limitations

Fonctionne instantanément en JavaScript côté client.