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

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 (« root em ») est une unité qui varie en fonction de la taille de police de l’élément racine de la page, normalement la balise <html>. Les navigateurs définissent généralement cette taille de police par défaut à 16 px, sauf si un site la modifie. Si la taille de police racine est de 16 px, alors 1rem équivaut à 16 px.

Un em est une unité qui varie en fonction de la taille de police de l’élément sur lequel elle est utilisée. Lorsque l’em définit lui-même la propriété font-size, il est mesuré par rapport à la taille de police héritée de l’élément parent, c’est-à-dire l’élément qui le contient. Si un élément parent a font-size: 20px, alors font-size: 1em à l’intérieur de ce parent équivaut à 20 px. Le convertisseur utilise ce cas fondé sur le parent.

La principale différence entre rem et em tient à la référence de chacun. Le rem se réfère toujours à l’élément racine. L’em se réfère à la taille de police propre à l’élément ou héritée, de sorte que sa valeur peut 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 :

rem = px ÷ taille de police racine

Exemple

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 :

px = rem × 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 :

em = px ÷ taille de police parente

Exemple

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 :

px = em × taille de police parente

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 :

em = rem × (taille de police racine ÷ taille de police parente)

rem = em × (taille de police parente ÷ taille de police racine)

Exemple

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.

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.
3. Réglez la taille de police racine pour qu’elle corresponde à l’élément <html> du projet (16 px par défaut dans la plupart des navigateurs).
4. Réglez la taille de police du parent pour qu’elle corresponde à celle de l’élément à l’intérieur duquel se trouverait une valeur en rem ou en em.
5. Utilisez le bouton de copie situé à côté d’un champ pour copier sa valeur.

L’outil affiche aussi les trois valeurs côte à côte, afin de comparer visuellement leurs tailles relatives.

Foire aux questions

Quelle est la différence entre rem et em ? Le rem se réfère toujours à la taille de police de l’élément racine. L’em se réfère à la taille de police de l’élément sur lequel il est utilisé, qui, pour font-size lui-même, est la taille héritée du parent. 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 16 px comme taille de police par défaut ? 16 px est la taille de texte par défaut habituelle des principaux navigateurs, et chacun peut la modifier dans les paramètres de son navigateur. Les recommandations d’accessibilité du web demandent que le texte puisse être redimensionné jusqu’à 200 pour cent sans perte de contenu ni de fonctionnalité. Dimensionner le texte en rem permet à une page de suivre la taille par défaut choisie par le lecteur.

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 des longueurs négatives, comme les marges ou les transformations CSS. Le remplissage (padding) ne peut pas être négatif en CSS : les valeurs négatives du padding sont invalides, si bien que les navigateurs les ignorent.

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.

Références

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units niveau 4, longueurs relatives à la police — l’em équivaut à la taille de police calculée de l’élément (la taille héritée lorsqu’il est utilisé dans font-size) ; le rem équivaut à l’unité em de l’élément racine.
2. Mozilla. font-size, MDN Web Docs. MDN : font-size — si aucune taille de police n’est définie sur les ancêtres, 1 em équivaut à la valeur par défaut du navigateur, généralement 16 px.
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.1 Understanding 1.4.4 — le texte peut être redimensionné jusqu’à 200 pour cent sans perte de contenu ni de fonctionnalité.
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model niveau 4 — les valeurs négatives des propriétés de padding sont invalides.