Passer au contenu
🛠️
Whiz Tools

Convertisseur PX en REM et EM – Calculateur d'unités CSS gratuit

Convertissez instantanément les pixels en unités REM et EM. Convertisseur d'unités CSS gratuit pour la conception web responsive. Prend en charge les tailles de police personnalisées et les calculs en temps réel pour des résultats précis.

Convertisseur d'unités PX, REM et EM

Convertir entre les pixels (PX), les root em (REM) et les em (EM). Saisissez une valeur dans n'importe quel champ pour voir les valeurs équivalentes dans les autres unités.

px
px
px
rem
em
Visualisation non disponible pour des valeurs négatives ou nulles

Formules de conversion

  • PX vers REM : valeur en px ÷ taille de police racine
  • PX vers EM : valeur en px ÷ taille de police parent
  • REM vers PX : valeur en rem × taille de police racine
  • EM vers PX : valeur en em × taille de police parent
Calculateur de chargement...
📚

Documentation

Convertisseur d’unités px, rem et em

Un convertisseur px vers rem et em convertit une longueur CSS entre les pixels (px), les unités em racine (rem) et les unités em, à l’aide d’une taille de police racine et d’une taille de police parente définies par l’utilisateur. Ces trois unités sont les moyens les plus courants de définir la taille du texte et les espacements en CSS, le langage utilisé pour mettre en forme les pages web.

Que sont les unités px, rem et em ?

Un pixel (px) est une unité fixe. Une boîte définie avec une largeur de 200px reste large de 200px, quelle que soit la taille de police utilisée par la page.

Un rem (« em racine ») est une unité qui s’adapte à la taille de police de l’élément racine de la page, généralement la balise <html>. La plupart des navigateurs définissent cette taille de police racine sur 16px, sauf si le site la modifie. Si la taille de police racine est de 16px, alors 1rem équivaut à 16px.

Une unité em est une unité qui s’adapte à la taille de police de l’élément parent, c’est-à-dire l’élément qui la contient. Si un élément parent a la propriété font-size: 20px, alors 1em à l’intérieur de ce parent équivaut à 20px.

La principale différence entre rem et em tient à la référence de mesure de chacune. Rem se base toujours sur l’élément racine. Em se base sur le parent le plus proche ; sa valeur peut donc changer à chaque niveau d’imbrication.

Comment calculer une conversion de px en rem

Pour convertir des pixels en rem, divisez la valeur en pixels par la taille de police racine :

r=pRr = \frac{p}{R}

où r est la longueur en rem, p la longueur en pixels et R la taille de police racine en pixels.

Exemple détaillé

Avec la taille de police racine par défaut de 16px, 24px se convertissent ainsi :

24 ÷ 16 = 1,5rem

Si un site définit sa taille de police racine sur 10px, une pratique courante obtenue en définissant html { font-size: 62.5%; }, puisque 62,5 % de 16px correspondent à 10px, les mêmes 24px deviennent :

24 ÷ 10 = 2,4rem

Comment calculer une conversion de rem en px

Pour effectuer la conversion inverse, multipliez la valeur en rem par la taille de police racine :

p=r×Rp = r \times R

où p est la longueur en pixels, r la longueur en rem et R la taille de police racine.

Avec une taille racine de 16px, 1.5rem se convertissent à nouveau en 1,5 × 16 = 24px.

Comment calculer une conversion de px en em

Pour convertir des pixels en em, divisez la valeur en pixels par la taille de police de l’élément parent :

e=pPe = \frac{p}{P}

où e est la longueur en em et P la taille de police de l’élément parent en pixels.

Exemple détaillé

Si la taille de police de l’élément parent est de 20px, 24px se convertissent ainsi :

24 ÷ 20 = 1,2em

Comment calculer une conversion de em en px

Multipliez la valeur en em par la taille de police parente :

p=e×Pp = e \times P

où p est la longueur en pixels, e la longueur en em et P la taille de police de l’élément parent.

Avec un parent de 20px, 1.2em se convertissent à nouveau en 1,2 × 20 = 24px.

Comment calculer une conversion de rem en em et de em en rem

Comme rem et em se basent sur des tailles de police différentes, leur conversion nécessite à la fois la taille de police racine et celle du parent :

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

où R est la taille de police racine et P la taille de police de l’élément parent.

Exemple détaillé

Avec une taille de police racine de 16px et une taille de police parente de 20px, 2rem se convertissent ainsi :

2 × (16 ÷ 20) = 1,6em

Si les tailles de police racine et parente sont égales, 1rem équivaut toujours à 1em.

Quand chaque unité est utile

Les pixels conviennent aux détails dont la taille ne doit pas changer, comme une bordure de 1px ou une icône de largeur fixe.

Rem est couramment utilisé pour les espacements et la typographie qui doivent rester cohérents sur toute une page. Comme rem fait toujours référence à la taille de police racine, une valeur en rem ne change pas, quelle que soit la profondeur d’imbrication d’un élément. Les mises en page fondées sur rem s’adaptent aussi automatiquement lorsqu’une personne augmente la taille de police par défaut de son navigateur, ce qui facilite la lecture pour les personnes malvoyantes.

Em convient bien à l’intérieur d’un composant autonome, comme un bouton, lorsque le remplissage doit s’adapter à la propre taille de police du bouton. Un problème courant avec em est l’effet cumulatif : si plusieurs éléments imbriqués utilisent chacun font-size: 1.2em, chaque niveau multiplie la valeur du précédent, de sorte que les tailles de police augmentent plus vite que prévu.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Après trois niveaux, le texte a augmenté d’environ 73 %, et non de 20 % comme pourrait le prévoir un développeur à partir d’une seule règle 1.2em.

Utilisation du convertisseur

  1. Saisissez une valeur dans le champ des pixels, des rem ou des em.
  2. Les deux autres champs se mettent à jour automatiquement, avec un arrondi à quatre décimales.
  3. Définissez la taille de police racine pour qu’elle corresponde à celle de l’élément <html> du projet. Elle est par défaut de 16px dans la plupart des navigateurs et n’a d’effet que sur rem.
  4. Définissez la taille de police parente pour qu’elle corresponde à celle de l’élément dans lequel se trouverait une valeur en em. Elle n’a d’effet que sur em.
  5. Utilisez le bouton de copie situé à côté d’un champ pour copier sa valeur.

Les deux champs de taille de police acceptent uniquement un nombre entier de pixels, la plus petite valeur autorisée étant 1px. Le bouton de réinitialisation efface la valeur et ramène les deux tailles de police à 16px.

Sous les champs, l’outil dessine une barre par unité. Les trois barres représentent la même longueur physique et ont donc la même largeur, ce qui permet de vérifier rapidement que la conversion est correcte. Une barre est dessinée à sa longueur réelle en pixels jusqu’à 300px ; au-delà, elle est réduite pour tenir dans l’espace disponible. Ainsi, une valeur de 600px et une valeur de 900px se terminent toutes deux à 300px. Les barres n’apparaissent que lorsque la valeur en pixels est supérieure à zéro.

Foire aux questions

Quelle est la différence entre rem et em ? Rem fait toujours référence à la taille de police de l’élément racine. Em fait référence à la taille de police de l’élément parent le plus proche. Une valeur en rem reste identique partout sur une page ; une valeur en em peut changer selon la profondeur d’imbrication de l’élément.

Pourquoi les navigateurs utilisent-ils 16px comme taille de police par défaut ? 16px est depuis longtemps la taille de texte par défaut des principaux navigateurs, car elle est confortable à lire sur les écrans courants sans mise en forme supplémentaire. Les recommandations en matière d’accessibilité du Web préconisent que le texte puisse être agrandi jusqu’à 200 % sans perturber la mise en page, et 16px constitue un point de départ pratique pour cela.

Qu’est-ce que l’astuce 62,5 % ? La définition de html { font-size: 62.5%; } transforme la taille de police racine par défaut de 16px en 10px, puisque 62,5 % de 16 correspondent à 10. Cela simplifie les calculs en rem, car 1,6rem équivalent à 16px et 2,4rem équivalent à 24px.

Les valeurs en px, rem et em peuvent-elles être négatives ? Oui, pour les propriétés qui acceptent les longueurs négatives, comme les marges ou les transformations CSS. Le remplissage ne peut pas être négatif en CSS ; les navigateurs ignorent une valeur de remplissage négative. Le convertisseur gère les valeurs négatives, mais ne dessine aucune barre pour celles-ci, car une barre ne peut pas avoir une largeur négative.

Faut-il convertir chaque valeur en pixels en rem ? Pas nécessairement. Les bordures et autres détails fins sont généralement conservés en pixels, car ils doivent rarement s’adapter à la taille de police et peuvent paraître irréguliers avec des largeurs inférieures à un pixel. Rem convient aux espacements et à la typographie qui doivent s’adapter à la préférence de taille de police de l’utilisateur.

Le choix de l’unité a-t-il une incidence sur les performances de la page ? Non. Les navigateurs convertissent toutes les longueurs CSS en une même valeur interne lors de la mise en page ; px, rem et em sont donc rendus avec la même rapidité. Le choix entre ces unités influe sur la maintenabilité et l’accessibilité, mais pas sur la vitesse.