Convertir PX en REM (convertisseur d'unités CSS)

Comment ça marche

Collez votre code CSS dans le panneau de gauche : la version en rem s'affiche à droite pendant la saisie. Le calcul tient en une division : rem = px ÷ taille de police racine. Les navigateurs fixent la racine à 16 pixels par défaut, donc 16px font 1rem, 24px font 1.5rem et 14px font 0.875rem. Si votre feuille de style contient html { font-size: 62.5% }, la racine vaut 10 pixels : saisissez 10 et 24px deviennent 2.4rem. Le convertisseur lit le fichier comme des règles CSS, pas comme du texte brut ; seule la partie située après les deux-points est modifiée. Un nom de classe comme .mt-16px, un nom de fichier comme url(icone-16px.png) et le texte entre guillemets restent tels quels, de même que les nombres sans unité comme line-height: 1.5. Si vous n'avez qu'une liste de nombres, par exemple 16, 24, 32 relevés dans une maquette Figma, chaque ligne est convertie comme une valeur séparée. La ligne de résultat indique combien de valeurs ont été converties, combien de traits fins sont restés en px et combien de valeurs de media query ont été calculées sur une base de 16 pixels. Pour le sens inverse, choisissez rem → px dans Sens.

Cet outil est aussi connu sous le nom de convertir px en rem, px en rem, rem en px, px to rem, convertisseur px rem, calcul rem css.

Qu'est-ce que rem ?

rem (root em) est une unité de longueur CSS mesurée par rapport à la taille de police de l'élément racine, la balise html. 1rem égale le font-size de html, que les navigateurs fixent par défaut à 16 pixels. Quand un visiteur augmente la taille du texte dans les réglages de son navigateur, tout ce qui est écrit en rem grandit ensemble : texte, espacements et largeurs. C'est pourquoi les maquettes accessibles expriment texte et marges en rem. Contrairement à em, rem ne se multiplie pas dans les éléments imbriqués : toute la page utilise la même racine.

Qu'est-ce que px (pixel CSS) ?

Le px du CSS n'est pas un point physique de l'écran mais une unité de référence : il est défini comme un point qui paraît large de 1/96 de pouce vu à environ une longueur de bras. Sur les écrans de téléphone à haute densité, un pixel CSS est dessiné avec deux ou trois pixels physiques. px se comporte comme une unité fixe et ignore la taille de texte choisie par le visiteur dans son navigateur. Il convient donc aux détails qui doivent garder la même épaisseur, comme les bordures et les ombres, et beaucoup moins aux tailles de police.

Quelle est la différence entre px et rem ?

px est fixe : un paragraphe en font-size: 14px reste à 14 pixels même si le visiteur a choisi un grand texte par défaut. rem suit ce choix : 0.875rem font 14 pixels avec les réglages par défaut et 17,5 pixels chez quelqu'un qui a porté le texte par défaut à 20 pixels. Deux pages identiques avec les réglages par défaut se comportent différemment pour ces lecteurs : l'une reste petite, l'autre grandit avec eux. Utilisez rem pour le texte, les espacements et les largeurs de page, et px pour les détails comme les bordures fines et les ombres, dont l'épaisseur ne doit jamais changer.

Pourquoi rem vaut toujours 16 pixels dans une media query

C'est le piège de la plupart des passages de px à rem. Dans une déclaration, rem suit la taille de police de l'élément html : avec html { font-size: 62.5% }, 1rem vaut 10 pixels. Une media query comme @media (min-width: …) ne voit pas ce réglage. Elle est évaluée avant que les styles de la page s'appliquent, et rem y désigne la taille de police initiale du navigateur, soit 16 pixels tant que le visiteur ne l'a pas modifiée.

Si vous comptez avec une racine de 10 pixels et transformez le point de rupture 768px en 76.8rem, la mise en page bascule vers 1 228 pixels au lieu de 768 et l'affichage tablette se retrouve sur les écrans d'ordinateur. Cet outil convertit les valeurs des lignes @media toujours avec 16, quelle que soit la racine saisie (768px → 48rem), et les compte dans la ligne de résultat.

• Dans une déclaration : rem = px ÷ votre taille racine
• Dans une media query : rem = px ÷ 16 (valeur initiale du navigateur)
• Si le visiteur agrandit le texte par défaut, les deux grandissent ensemble ; c'est là le gain d'accessibilité

Quelles valeurs garder en px

Tout convertir en rem n'est pas le but. rem est utile quand un visiteur augmente la taille du texte dans son navigateur : texte, espacements et largeurs grandissent ensemble et la page reste lisible pour une personne malvoyante. Là où cette croissance n'apporte rien, px est le choix le plus sûr.

La bordure de 1 pixel est le cas classique. À 0.0625rem, elle passe sous le pixel dès qu'on choisit un texte plus petit, et les navigateurs arrondissent ces fractions chacun à leur manière : le trait paraît flou sur un écran, épais sur un autre. Une bordure doit rester le même trait fin partout, pas suivre la taille du texte. C'est pourquoi les valeurs de 1px ou moins restent en px par défaut ; l'option permet de les convertir quand même. Décalages d'ombre, épaisseur des icônes et taille réelle des images restent eux aussi le plus souvent en px.

• À convertir en rem : font-size, padding, margin, gap, max-width, points de rupture
• À garder en px : bordure de 1px, séparateurs fins, décalage d'ombre
• À garder sans unité : line-height (comme 1.5), z-index, proportions flex

Questions fréquentes

Combien de rem font 16px ?

Avec la racine par défaut de 16 pixels, 16px font exactement 1rem. Sur la même base, 12px font 0.75rem, 14px font 0.875rem, 18px font 1.125rem, 24px font 1.5rem et 32px font 2rem. Si votre élément html a un autre font-size, saisissez cette valeur dans le champ racine.

Quelle est la différence entre rem et em ?

rem se base toujours sur la taille de police de l'élément html et donne la même valeur partout dans la page. em se base sur la taille de police de l'élément parent et se multiplie dans les éléments imbriqués. Ce convertisseur travaille uniquement entre px et rem ; les valeurs en em ne sont pas modifiées.

J'utilise font-size: 62.5%. Quelle racine dois-je saisir ?

62,5 % de 16 pixels font 10 pixels : saisissez 10. 24px deviennent 2.4rem et 14px deviennent 1.4rem. Les valeurs des media queries restent converties avec 16, car une media query ne voit pas le font-size défini sur l'élément html.

Mes noms de classes et de fichiers images vont-ils être modifiés ?

Non. Seule la partie valeur des déclarations CSS est convertie. Les sélecteurs comme .p-16px, les adresses comme url(fond-32px.png), le texte entre guillemets et les commentaires restent exactement tels quels.

Mon code CSS est-il envoyé quelque part ?

Non. La conversion se fait entièrement dans votre navigateur ; la feuille de style que vous collez n'est envoyée à aucun serveur.

Sources

• W3C — CSS Values and Units Module Level 4, §6.1 font-relative lengths (rem)