SuperDevTools
FR

Convertir px en rem (et rem en px)

Taille de police de base

Préréglages :

16 px est la taille de police par défaut des navigateurs. Changez-la seulement si votre feuille de style modifie la taille de html (par exemple html { font-size: 62.5% } donne une base de 10 px).

Convertir px ↔ rem

Convertir px ↔ em

Un em dépend de la taille de police de l'élément parent, pas de la base de la page.

Convertir du CSS en lot

Les sélecteurs, les conditions @media, les commentaires, les chaînes et les url() ne sont pas modifiés.

Tableau px → rem, base 16 px

Cliquez sur une valeur pour la copier.

pxrem

Tout est calculé dans votre navigateur : rien n'est envoyé. La base et les options restent sur cet appareil.

Passer des pixels aux rem sans calcul de tête

Ce convertisseur traduit une taille en pixels en rem, et l'inverse, à partir de la taille de police de base de votre page. Il calcule aussi les em, convertit un bloc de CSS entier et affiche un tableau de 1 à 96 px. Rien n'est envoyé : tout est calculé sur place.

Mode d'emploi

  1. Sous « Taille de police de base », laissez 16 ou choisissez un préréglage : 10, 14, 16, 18 ou 20 px.
  2. Dans « Convertir px ↔ rem », tapez une valeur dans « Pixels (px) » ou dans « rem » : l'autre champ se met à jour, et la formule s'affiche dessous. « Copier » place la valeur avec son unité dans le presse-papiers.
  3. Pour un em, indiquez la « Taille du parent (px) » puis la valeur en pixels ou en em.
  4. Pour un fichier entier, collez votre code dans « CSS à convertir ». Réglez « Ignorer 1px », « Ignorer les bordures (border, outline) », « Décimales » et « Conserver le px en commentaire », puis cliquez sur « Copier le CSS ».
  5. Dans le tableau, un clic sur une valeur la copie.

px, rem et em : quelle différence ?

Le px est une taille fixe. Le rem vaut la taille de police de l'élément racine html : 16 px par défaut. Le em vaut la taille de police du parent, et il se cumule : un texte à 1.2em dans un bloc à 1.2em mesure 1,44 fois la base, soit 23,04 px sur une base de 16.

La formule est simple : rem = px ÷ base et px = rem × base. Avec la base 16, 24 px donnent 1.5rem et 1.25rem donnent 20 px. Beaucoup de sites français posent html { font-size: 62.5% } pour obtenir une base de 10 px : 14 px s'écrivent alors 1.4rem : choisissez alors le préréglage 10 px.

Pourquoi le rem compte pour l'accessibilité

Une personne malvoyante peut régler la taille de police par défaut de son navigateur sur 20 px au lieu de 16. Un titre écrit en 24px reste à 24 px et ignore ce choix. Écrit en 1.5rem, il passe à 30 px. Le rem respecte la préférence de l'utilisateur, ce que demandent les règles d'accessibilité numérique (RGAA en France).

Quand utiliser rem ou em

  • rem pour les tailles de texte, les marges et les espacements de la mise en page.
  • em pour ce qui doit suivre le texte de son composant, comme le padding d'un bouton : avec un parent de 20 px, 30 px font 1.5em.
  • px pour les bordures fines et les ombres, d'où l'option « Ignorer les bordures (border, outline) ».

La conversion en lot

Avec la base 16 et les bordures ignorées, padding: 16px 24px; border: 1px solid; font-size: 18px devient padding: 1rem 1.5rem; border: 1px solid; font-size: 1.125rem. Les sélecteurs, les conditions @media, les commentaires, les chaînes et les url() ne sont pas modifiés.

Questions fréquentes

Combien vaut 1rem en px ?

1rem vaut la base de la page, donc 16 px si vous n'avez pas changé la taille de html. Avec font-size: 62.5%, 1rem vaut 10 px.

Faut-il changer la base si mon site utilise 16 px ?

Non. Ne la modifiez que si votre feuille de style change la taille de police de html.

Pourquoi garder 1px en px ?

Une ligne de 1 px convertie en 0.0625rem peut s'afficher floue ou disparaître selon l'écran. « Ignorer 1px » la laisse telle quelle.

Combien de décimales choisir ?

Quatre suffisent : 1px fait 0.0625rem sur une base de 16. Avec une base de 14, 10 px donnent 0.7143rem à quatre décimales et 0.71rem à deux, soit 9,94 px, un écart invisible.