Mode d’emploi
- Définissez la taille de police racine si votre site la modifie (par exemple, html { font-size: 62.5% } la ramène à 10px).
- Saisissez une valeur dans l’un ou l’autre champ pour convertir px en rem ou rem en px. Passez à em si vous souhaitez vous baser sur un élément parent.
- Utilisez le tableau pour trouver rapidement une valeur, ou collez un extrait CSS pour convertir toutes les longueurs en px d’un seul coup et copier le résultat.
Fonctionnement
rem = px ÷ taille de police racine. Avec la valeur par défaut de 16px, 24px équivaut à 1.5rem et 14px à 0.875rem. em suit la même formule, mais se base sur la taille de police de l’élément parent, ce qui explique pourquoi les valeurs em imbriquées se multiplient. rem évite ce problème, car il se rapporte toujours à la racine.
Utiliser rem pour les tailles de police et les espacements permet au texte de s’agrandir lorsque quelqu’un augmente la taille de police par défaut dans les paramètres de son navigateur, ce qui aide les personnes malvoyantes. Les valeurs sont arrondies à quatre décimales.
Le convertisseur de code remplace les nombres suivis de px. Il laisse intacts les commentaires, url(…) et les chaînes entre guillemets, conserve 1px si vous le demandez (les bordures fines devraient généralement rester à 1px), remplace 0px par 0 et, par défaut, ne modifie pas les conditions @media et @container, car dans les requêtes média, rem et em se rapportent toujours à la taille de police initiale du navigateur, quelle que soit la taille de police racine que vous définissez. Il ne tient pas compte de la sémantique de calc() au-delà du remplacement des nombres en px qu’il contient, ce qui reste correct puisque chaque longueur est convertie séparément.
Exemples
Taille de racine par défaut
Avec une racine de 16px : 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
L’astuce du 62.5 %
Si votre CSS définit html { font-size: 62.5% }, la racine est de 10px. Ainsi, 14px = 1.4rem et 24px = 2.4rem. Définissez la taille de police racine sur 10 pour obtenir le même résultat.
Convertir un composant
padding: 24px 16px; border: 1px solid #ddd; devient padding: 1.5rem 1rem; border: 1px solid #ddd; lorsque l’option « Conserver les valeurs 1px » est activée.
Foire aux questions
Dois-je utiliser rem ou em ?
Utilisez rem pour la plupart des tailles de police, des espacements et de la mise en page, car cette unité est prévisible partout. Utilisez em lorsqu’un élément doit s’adapter à la taille de texte de son propre composant, par exemple pour le padding d’un bouton.
Pourquoi ne pas convertir les requêtes média en rem ?
C’est possible, mais dans une requête média, 1rem équivaut toujours à la taille de police par défaut du navigateur (généralement 16px), et non à la taille de police définie pour html. Le convertisseur les ignore donc par défaut. Désactivez l’option si vous divisez de toute façon par 16.
rem est-il plus accessible que px ?
Pour les tailles de police, oui : rem respecte le réglage de taille de police par défaut de l’utilisateur, contrairement aux tailles en px. Le zoom du navigateur fonctionne avec les deux unités.
Confidentialité
Les conversions et l’extrait CSS sont traités dans votre navigateur et ne sont jamais envoyés ailleurs.