Skip to main content

Convertisseur CSS

Français

Convertissez entre px, rem, em, vw, vh et pt.

1 rem
px
16
rem
1
em
1
vw
1.11
vh
1.78
pt
12
Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n'est envoyée au serveur.

Les résultats sont fournis à titre informatif. Vérifiez-les auprès d'autres sources.

Imbriquez 1,25em sur quatre niveaux et vous obtenez 39px, pas 20px

em se rapporte au parent, donc l'imbrication le multiplie. Quatre éléments réglés chacun à 1,25em atterrissent à 2,441 fois la racine — 39,06px là où l'auteur voulait presque certainement 20px. rem se rapporte à la racine et ne se cumule jamais : c'est toute la différence pratique entre les deux unités.

Comment ça marche

  • Convertit entre px, rem, em, pt et pourcentages à la référence CSS de 96 ppp.
  • Rend explicite le cumul de em, puisque c'est de là que viennent les surprises.
  • Montre ce que devient une valeur quand l'utilisateur change sa taille de police racine — ce que font justement les réglages d'accessibilité.
rem = px ÷ taille de police racine        (16px par défaut)
em  = px ÷ taille de police du parent

1pt = 96 ÷ 72 = 1,3333px    donc 12pt = exactement 16px

em imbriqué se multiplie : 1,25em dans 1,25em = 1,5625 × racine

Exemple chiffré

Le même facteur 1,25 appliqué en em puis en rem, sur quatre niveaux.

  1. niveau 1 — em : 20,00px · rem : 20px
  2. niveau 2 — em : 25,00px · rem : 20px
  3. niveau 3 — em : 31,25px · rem : 20px
  4. niveau 4 — em : 39,06px · rem : 20px
  5. 1,25⁴ = 2,4414

La chaîne em double presque la taille voulue au quatrième niveau, tandis que chaque élément en rem reste à 20px. Aucune unité n'est défaillante ; elles répondent à des questions différentes, et prendre em quand on pensait rem est l'un des bugs de dimensionnement CSS les plus répandus.

Lire le résultat

  • L'échec classique, ce sont les listes imbriquées. Posez ul { font-size: 0,875em } et chaque niveau rétrécit encore : 14,00px, puis 12,25px, puis 10,72px. Au troisième niveau le texte est 33,0% plus petit que la racine, et non les 12,5% que la règle semble annoncer.
  • 12pt vaut exactement 16px, et c'est une véritable coïncidence à connaître. La taille de police par défaut du navigateur et la taille de corps standard en impression tombent sur la même valeur à la référence CSS de 96 ppp : pt et px coïncident en exactement un point utile et nulle part ailleurs.
  • rem est le choix accessible pour la typographie car il suit le réglage racine de l'utilisateur. Quelqu'un qui a mis son navigateur à 24px voit 1,5rem rendu à 36px, tandis qu'un 24px codé en dur reste 24px et l'ignore complètement.
  • em reste la bonne unité quand vous voulez une proportion au texte local — par exemple une marge intérieure de bouton qui doit suivre son propre libellé. La règle empirique : rem pour les tailles de police, em pour les espacements qui appartiennent à l'élément.

Questions fréquentes

Faut-il utiliser rem ou em ?
rem pour les tailles de police, em pour les espacements devant suivre le texte propre de l'élément. rem ne se cumule jamais : un composant déposé trois niveaux plus bas s'affiche à l'identique. em se cumule délibérément, ce qui est utile pour les marges intérieures et nuisible pour la typographie.
Pourquoi mon texte imbriqué rétrécit-il ?
Parce que em multiplie à chaque niveau. Une règle 0,875em appliquée à trois listes imbriquées donne 14,00px, 12,25px, puis 10,72px. Passez la font-size en rem et chaque niveau s'affiche à la même taille quelle que soit la profondeur.

Sources