Convertisseur REM vers PX
Ce convertisseur REM vers PX traduit les unités REM en valeurs pixel selon votre taille de police racine. Saisissez une valeur REM et une taille de base pour voir l’équivalent calculé en pixels, utile pour déboguer les mises en page CSS responsives et vérifier les mesures.
Convertisseur REM vers PX
Convertissez des valeurs rem et pixel (px) selon la taille de police de l’élément racine
Questions fréquentes
Comment convertir REM en PX ?
Pour convertir des REM en pixels, multipliez la valeur REM par la taille de police racine. La formule est : PX = REM x taille de police racine. Avec la taille racine par défaut de 16px, 1.5rem x 16px = 24px. Si votre taille racine est différente, par exemple 10px avec la technique des 62,5 %, utilisez cette valeur à la place. Conversions courantes en base 16px : 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.5rem = 24px, 2rem = 32px, 3rem = 48px.
Combien vaut 1 REM en pixels ?
Par défaut, 1 REM équivaut à 16 pixels dans la plupart des navigateurs. REM signifie 'root em' et dépend de la taille de police de l’élément racine. Si vous définissez html { font-size: 16px; }, alors 1rem = 16px, 1.5rem = 24px, 2rem = 32px. La formule est : pixels = rem × taille-de-police-racine.
Quelle est la formule pour convertir REM en PX ?
La formule est : PX = REM × taille de police racine. Avec la taille racine par défaut de 16px : PX = REM × 16. Par exemple, 2.5rem = 2.5 × 16 = 40px. Si vous utilisez la technique des 62,5 % (html { font-size: 62.5%; }), la taille de police racine devient 10px, donc 2.5rem = 25px.
Combien vaut 2rem en pixels ?
2rem équivaut à 32 pixels avec la taille de police racine par défaut de 16px (2 x 16 = 32). Si la taille racine a été fixée à 10px avec la technique des 62,5 %, alors 2rem équivaut à 20px (2 x 10 = 20). La conversion dépend toujours de la taille de police racine. Les usages courants de 2rem incluent les tailles de titres (éléments h2), le padding de sections et les marges de composants dans les design systems.
Comment le changement de taille de police racine affecte-t-il les valeurs REM ?
Modifier la taille de police racine affecte proportionnellement toutes les valeurs REM de la page. Si vous passez la racine de 16px à 20px, toutes les mesures en REM augmentent de 25 %. Un élément réglé à 1.5rem passe de 24px à 30px. Cet effet en cascade est à la fois la force et le risque des unités REM. Il permet une mise à l’échelle globale pour le design responsive, mais signifie qu’un changement de taille racine impacte toute la mise en page. C’est pourquoi certaines équipes utilisent une racine à 62,5 % (10px) pour faciliter les calculs tout en gardant le texte du body à 1.6rem.
Quelle est la différence entre REM et EM ?
REM (root em) est toujours relatif à la taille de police de l’élément racine, ce qui donne des tailles cohérentes sur toute la page. EM est relatif à la taille de police de l’élément parent, ce qui peut créer des effets de composition. Par exemple, si un parent a font-size: 1.2em et qu’un enfant a aussi font-size: 1.2em, la taille calculée de l’enfant devient 1.44em par rapport au grand-parent. REM évite cette composition parce qu’il se réfère toujours à la racine. Utilisez REM pour des espacements et tailles de police cohérents ; utilisez EM lorsque vous voulez qu’un élément se mette à l’échelle par rapport à la police de son parent.
Comment trouver la taille de police racine d’une page ?
Pour trouver la taille de police racine, ouvrez les outils de développement du navigateur (F12 ou Ctrl+Shift+I), sélectionnez l’élément <html> dans le panneau Elements, puis vérifiez font-size dans l’onglet Computed. Vous pouvez aussi exécuter ce JavaScript dans la console : getComputedStyle(document.documentElement).fontSize. Cela retourne la valeur calculée en pixels, que le CSS utilise des pourcentages, des em ou des pixels. La valeur par défaut est '16px' sauf surcharge par une feuille de style.
Pourquoi les valeurs REM s’affichent-elles différemment dans certains navigateurs ?
Les valeurs REM devraient s’afficher de façon cohérente dans les navigateurs modernes, car tous les grands navigateurs utilisent 16px comme taille de police racine par défaut. Les différences apparaissent généralement lorsque l’utilisateur a changé la taille de police par défaut du navigateur dans les paramètres (fonction d’accessibilité), lorsqu’un reset CSS ou un framework remplace la taille racine, ou lorsque la page utilise une autre base via html { font-size: ... }. Le rendu sous-pixel peut aussi créer de légères différences visuelles, car les navigateurs arrondissent différemment les valeurs fractionnaires (par exemple, 0.875rem = 14px peut s’afficher comme 13px ou 14px).
Qu’est-ce que la technique des 62,5 % pour REM ?
La technique des 62,5 % fixe la taille de police racine à 62,5 % de la valeur par défaut du navigateur (62,5 % de 16px = 10px), ce qui facilite le calcul mental : 1rem = 10px, 1.6rem = 16px, 2.4rem = 24px. On l’applique avec html { font-size: 62.5%; }, puis on définit body { font-size: 1.6rem; } pour restaurer le texte courant à 16px. Cette technique respecte les préférences de taille de police de l’utilisateur, car elle utilise un pourcentage plutôt qu’une valeur fixe en pixels.
Comment convertir REM en PX
Convertir des REM en pixels est direct. La formule est :
pixels = rem × taille de police racine
La taille de police racine est la valeur font-size définie sur l’élément <html>. Dans les principaux navigateurs (Chrome, Firefox, Safari, Edge), la taille de police racine par défaut est 16px. Cela signifie que 1rem = 16px, sauf si votre feuille de style la remplace.
Exemple : convertir 2.5rem en pixels avec la base par défaut de 16px :
2.5rem × 16px = 40px
Si votre projet utilise la technique des 62,5 % (taille de police racine = 10px) :
2.5rem × 10px = 25px
Tableau de conversion REM vers PX
Tableau de référence des valeurs REM courantes et de leurs équivalents en pixels avec la taille de police de base par défaut de 16px :
| REM | PX (base 16px) |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
| 5rem | 80px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 12rem | 192px |
| 16rem | 256px |
| 20rem | 320px |
Qu’est-ce que REM en CSS ?
REM signifie Root EM. C’est une unité CSS relative qui se réfère toujours à la taille de police de l’élément racine (<html>). Contrairement à l’unité em, qui est relative à la taille de police de l’élément parent, REM fournit un point de référence unique et cohérent pour tout le document.
Lorsqu’un navigateur charge une page, il applique par défaut une taille de police de 16px à l’élément <html>. Toutes les valeurs REM de la page sont calculées par rapport à cette taille racine. Par exemple, 1.5rem se résout en 24px (1.5 × 16), 2rem en 32px et 0.75rem en 12px.
Le principal avantage de REM est la mise à l’échelle. Si un utilisateur change la taille de police par défaut du navigateur pour l’accessibilité, toutes les mesures basées sur REM s’adaptent proportionnellement. Un titre défini à 2rem passera de 32px à 40px si l’utilisateur règle la valeur par défaut du navigateur à 20px. Ce comportement est essentiel pour respecter les recommandations d’accessibilité WCAG.
REM est utilisé pour les tailles de police, les espacements (marges, padding), les largeurs, hauteurs et presque toutes les propriétés CSS acceptant une longueur. Il offre un bon équilibre entre la prévisibilité des unités absolues et la flexibilité des unités relatives.
REM vs EM : différences clés
REM et EM sont toutes deux des unités CSS relatives, mais elles se réfèrent à des éléments différents. Comprendre cette distinction aide à choisir la bonne unité.
| Fonctionnalité | REM | EM |
|---|---|---|
| Référence | Élément racine (<html>) | Élément parent |
| Composition | Pas de composition | Se compose avec l’imbrication |
| Prévisibilité | Cohérente sur toute la page | Varie selon le contexte |
| Idéal pour | Tailles globales, espacements, mise en page | Mise à l’échelle dans un composant |
| Exemple | 1.5rem = toujours 24px (base 16px) | 1.5em = dépend du parent |
En général, préférez REM pour la typographie, les marges, le padding et les dimensions de mise en page. Utilisez EM uniquement lorsque vous voulez volontairement que la taille d’un élément s’adapte à celle de son parent, par exemple le padding d’un bouton qui doit grandir avec sa taille de police.
La technique des 62,5 %
La technique des 62,5 % est une approche populaire qui simplifie les calculs REM en fixant la taille de police racine à 10px :
html {
font-size: 62.5%; /* 62,5 % de 16px = 10px */
}
body {
font-size: 1.6rem; /* Restaure le texte courant à 16px */
}
Avec une base de 10px, le calcul mental devient trivial : 1.6rem = 16px, 2.4rem = 24px, 1.2rem = 12px. Chaque valeur REM est simplement la valeur en pixels divisée par 10.
Pourquoi utiliser un pourcentage ? Définir la taille de police racine en pourcentage (62,5 %) plutôt qu’en valeur fixe en pixels (10px) préserve l’accessibilité. Si un utilisateur a défini la valeur par défaut du navigateur à 20px, la technique des 62,5 % donne 12.5px (62,5 % de 20px), et toutes les valeurs REM s’adaptent proportionnellement. Un html { font-size: 10px; } fixe remplacerait entièrement la préférence utilisateur.
Lorsque vous utilisez la technique des 62,5 % avec ce convertisseur, réglez la taille de base sur 10 pour obtenir des valeurs pixel exactes.
Outils associés
- Convertisseur PX vers REM — Convertissez des valeurs pixel en unités REM (conversion inverse)