Convertir px en rem – Pixels en rem et inversement

Comment utiliser : Convertisseur px en rem

1. Vérifiez la taille de police racine (16px par défaut).
2. Saisissez des pixels pour obtenir des rem, ou l’inverse.
3. Utilisez le tableau pour les tailles courantes.
4. Collez du CSS pour convertir tous les px d’un coup.
5. Copiez le CSS converti.

Qu’est-ce que le rem ?

rem signifie « root em » : une longueur relative à la taille de police de l’élément racine html. Les navigateurs utilisent 16px par défaut, donc 1rem = 16px sauf modification. Contrairement à em, qui dépend de l’élément parent et se cumule quand on imbrique, rem renvoie toujours à la même valeur racine, ce qui le rend prévisible.

Les valeurs les plus recherchées ont leur propre page, par exemple 16px en rem, 24px en rem et 32px en rem.

Pourquoi utiliser rem plutôt que px ?

Quand un visiteur augmente la taille de police par défaut de son navigateur — fréquent chez les personnes malvoyantes —, le texte et les espacements en rem grandissent avec elle, alors que les px restent figés. Utiliser rem pour les polices, le padding, les marges et les media queries garde une mise en page proportionnée et aide à respecter le critère WCAG 1.4.4 (agrandissement du texte), repris par le RGAA. Les filets et les ombres peuvent rester en px.

L’astuce des 62,5 %

Certains projets écrivent `html { font-size: 62.5%; }` pour que 1rem vaille 10px et que le calcul mental soit simple (24px = 2,4rem). Cela fonctionne, mais remplace la taille choisie par l’utilisateur pour tout ce qui n’est pas redimensionné ; beaucoup d’équipes préfèrent donc garder 16px et utiliser un convertisseur comme celui-ci. Saisissez 10 comme police racine pour reproduire ce réglage.

Convertir une feuille de style entière

Collez du CSS dans la zone de conversion : chaque nombre suivi de px passe en rem selon votre police racine. 0px devient 0 et les valeurs de 1px sont conservées par défaut pour que les bordures restent nettes. Vérifiez ensuite les media queries : le rem y utilise toujours la valeur par défaut du navigateur, pas celle de votre html.

Outils associés

Arrondissez les coins avec le Générateur de border-radius, créez des ombres avec le Générateur de box-shadow CSS et minifiez le fichier final avec le Minificateur et embellisseur CSS.

Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.