Convertisseur PX vers REM
Ce convertisseur PX vers REM transforme des valeurs en pixels en unités REM pour le CSS responsive. Les unités REM se mettent à l’échelle par rapport à la taille de police racine (16px par défaut), donc 16px = 1rem. Saisissez une valeur en pixels et une taille de police de base pour obtenir instantanément la valeur REM équivalente.
Convertisseur PX vers REM
Convertissez des valeurs pixel (px) en unités rem selon la taille de police de l’élément racine
Questions fréquentes
Quelle est la formule pour convertir PX en REM ?
La formule pour convertir PX en REM est : REM = valeur en pixels ÷ taille de police de base. La taille de police de base par défaut dans les navigateurs est 16px. Par exemple, pour convertir 24px en REM : 24 ÷ 16 = 1.5rem. Autres conversions courantes : 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 20px = 1.25rem, 32px = 2rem et 48px = 3rem. Si votre projet utilise une taille de police de base différente, remplacez simplement cette valeur dans la formule.
Quelle est la taille de police de base par défaut dans les navigateurs ?
La taille de police de base par défaut dans les principaux navigateurs web (Chrome, Firefox, Safari, Edge) est 16px. Cela signifie que sans surcharge CSS, 1rem équivaut à 16px. Cette valeur de 16px est le standard depuis les débuts du web et c’est celle que la plupart des convertisseurs PX vers REM utilisent par défaut. Certains développeurs la modifient avec 'html { font-size: 62.5%; }' pour obtenir une base de 10px, ce qui simplifie les conversions (1rem = 10px), mais cela peut poser des problèmes d’accessibilité si ce n’est pas géré avec soin.
Quelle est la différence entre PX et REM ?
PX (pixels) est une unité CSS absolue qui s’affiche à une taille fixe, indépendamment des réglages utilisateur ou des éléments parents. REM (root em) est une unité relative basée sur la taille de police de l’élément racine, généralement l’élément <html>. Si la taille de police racine est 16px, alors 1rem équivaut à 16px. La différence essentielle est que REM s’adapte lorsque les utilisateurs changent la taille de police par défaut du navigateur pour l’accessibilité, tandis que PX reste fixe. C’est pourquoi REM est souvent préféré pour le design web responsive et accessible.
Pourquoi utiliser REM plutôt que PX ?
Les unités REM suivent les préférences de taille de police de l’utilisateur, ce qui améliore l’accessibilité pour les personnes malvoyantes. Quand un utilisateur augmente la taille de police par défaut de son navigateur, les mises en page en REM s’agrandissent proportionnellement, tandis que les mises en page en PX restent fixes. REM améliore aussi la maintenabilité : changer la taille de police racine à un seul endroit met à l’échelle tout le design. Enfin, les unités REM combinées aux media queries facilitent la création de mises en page responsives adaptées à différentes tailles d’écran. Les recommandations WCAG 2.1 privilégient les unités relatives pour la taille du texte.
Quelle est la différence entre REM et EM ?
REM (root em) est relatif à la taille de police de l’élément racine (l’élément <html>), tandis que EM est relatif à la taille de police de son élément parent. REM produit donc des valeurs cohérentes quel que soit le niveau d’imbrication, alors que EM se compose à chaque niveau. Par exemple, si un parent a font-size: 1.5em et qu’un enfant a aussi font-size: 1.5em, la taille réelle de l’enfant est 1.5 × 1.5 = 2.25 fois la taille racine. Avec REM, 1.5rem vaut toujours 1.5 fois la taille racine. REM est généralement préféré pour sa prévisibilité.
Quand faut-il utiliser PX plutôt que REM ?
Utilisez PX pour les valeurs qui doivent rester constantes malgré les changements de taille de police. Les cas courants incluent les bordures (une bordure de 1px doit rester fine), les ombres portées et certains éléments décoratifs dont la mise à l’échelle donnerait un mauvais rendu. Les points de rupture des media queries sont souvent écrits en PX par cohérence, même si certains développeurs préfèrent EM. Pour la typographie, les espacements (margin et padding) et les propriétés de mise en page comme max-width sur les conteneurs, REM est généralement un meilleur choix pour l’accessibilité et le responsive.
Comment changer la taille de police de base ?
Pour changer la taille de police de base, définissez la propriété font-size sur l’élément html dans votre CSS. Par exemple, 'html { font-size: 62.5%; }' fixe la base à 10px (62,5 % de la valeur par défaut de 16px), ce qui simplifie les conversions : 1rem = 10px, 1.6rem = 16px. Vous pouvez aussi utiliser 'html { font-size: 18px; }' pour une base plus grande. Soyez prudent avec les valeurs fixes en pixels, car elles ignorent les préférences utilisateur, tandis que les pourcentages les respectent. Pour l’accessibilité, un pourcentage est recommandé afin de ne pas bloquer les utilisateurs qui augmentent la taille de police du navigateur.
Combien vaut 16px en REM ?
16px équivaut à 1rem avec la taille de police racine par défaut de 16px, utilisée par tous les principaux navigateurs (Chrome, Firefox, Safari, Edge). Le calcul est 16px ÷ 16px = 1rem. Si vous avez changé la taille de police racine, par exemple à 10px (pratique courante), alors 16px vaut 1.6rem (16 ÷ 10 = 1.6). Vérifiez toujours la taille de police racine de votre CSS pour obtenir des conversions exactes.
Comment REM améliore-t-il l’accessibilité ?
REM améliore l’accessibilité en respectant les préférences de taille de police de l’utilisateur. Lorsqu’une personne malvoyante augmente la taille de police par défaut du navigateur de 16px à 20px, tout le texte et les espacements en REM s’agrandissent proportionnellement. Un titre défini à 2rem passerait de 32px à 40px, en conservant la hiérarchie visuelle. Avec des valeurs PX fixes, le texte garderait la même taille indépendamment des réglages utilisateur, ce qui ignorerait leurs besoins d’accessibilité. Les recommandations WCAG 2.1 conseillent les unités relatives pour la taille du texte afin de garantir une lecture confortable pour tous.
À propos du convertisseur PX vers REM
Le convertisseur PX vers REM est un outil essentiel pour le développement web moderne. Il aide les développeurs et designers à convertir des valeurs en pixels (px) en unités em relatives (rem). REM (Root EM) est une unité CSS relative qui se base sur la taille de police de l’élément racine (html). Par défaut, 1rem équivaut à 16px dans la plupart des navigateurs. Utiliser des unités REM plutôt que des pixels rend les feuilles de style plus flexibles et plus maintenables, car elles s’adaptent aux préférences utilisateur.
Formule de conversion
Le convertisseur utilise cette formule :
REM = pixels ÷ taille de police racine
Exemples de calcul :
- Avec une base 16px : 24px = 24 ÷ 16 = 1.5rem
- Avec une base 16px : 32px = 32 ÷ 16 = 2rem
- Avec une base 10px : 24px = 24 ÷ 10 = 2.4rem
Comment utiliser ce convertisseur
- Saisissez votre valeur en pixels dans le champ de saisie.
- Définissez la taille de police racine souhaitée (16px par défaut).
- Le convertisseur calcule et affiche instantanément la valeur REM équivalente.
- Copiez la valeur REM convertie pour l’utiliser dans vos feuilles de style CSS.
Tableau de conversion PX vers REM (base 16px)
Tableau de référence pour les valeurs en pixels courantes et leurs équivalents REM avec une taille de police de base de 16px :
| PX | REM (base 16px) | PX | REM (base 16px) |
|---|---|---|---|
| 1px | 0.0625rem | 28px | 1.75rem |
| 2px | 0.125rem | 32px | 2rem |
| 4px | 0.25rem | 36px | 2.25rem |
| 8px | 0.5rem | 40px | 2.5rem |
| 10px | 0.625rem | 48px | 3rem |
| 12px | 0.75rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 16px | 1rem | 72px | 4.5rem |
| 18px | 1.125rem | 80px | 5rem |
| 20px | 1.25rem | 96px | 6rem |
| 24px | 1.5rem |
Cas d’utilisation courants
- Convertir des tailles de police de pixels en REM pour une meilleure mise à l’échelle du texte
- Transformer des valeurs de margin et padding pour obtenir des espacements cohérents
- Adapter les dimensions de conteneurs pour les mises en page responsives
- Définir des points de rupture responsives avec des unités REM
Avantages des unités REM
- Meilleure accessibilité — REM se met à l’échelle lorsque les utilisateurs modifient la taille de police par défaut du navigateur, ce qui donne aux personnes malvoyantes des mises en page proportionnelles.
- Design responsive simplifié — modifier la taille de police racine à un seul endroit redimensionne tout le design proportionnellement.
- Mise à l’échelle cohérente — contrairement à EM, REM fait toujours référence à l’élément racine ; l’imbrication ne multiplie donc jamais la taille.
- Conformité WCAG — WCAG 2.1 recommande les unités relatives pour la taille du texte afin que le contenu reste lisible pour tous.
Conseils professionnels
- Utilisez REM pour toutes les déclarations font-size afin de conserver une cohérence dans tout votre projet.
- Convertissez les propriétés d’espacement (margin, padding) en REM pour obtenir des mises en page proportionnelles.
- Gardez une taille de police racine cohérente dans tout votre projet pour une mise à l’échelle prévisible.
- Utilisez PX pour les bordures et les ombres portées lorsque la taille fixe est intentionnelle.
- Définir
html { font-size: 62.5%; }place la base à 10px, donc 1rem = 10px — pratique pour le calcul mental, mais testez soigneusement l’accessibilité.
Outils associés
- Convertisseur REM vers PX — Convertissez des unités REM en valeurs pixel (conversion inverse).