Ce que fait ce convertisseur
Le Convertisseur px vers rem et em transforme une valeur exprimée en pixels (px) en ses équivalents en rem et en em, et inversement. Vous pouvez saisir un nombre dans n'importe lequel des trois champs — px, rem ou em — et l'outil calcule aussitôt les valeurs équivalentes dans les deux autres unités. Modifier un champ met à jour les deux autres au fil de la frappe.
Deux réglages ajustent la conversion à votre contexte de travail: une taille de police racine, utilisée pour les valeurs en rem, et une taille de police de contexte em, utilisée pour les valeurs en em. Ces deux réglages ont chacun une valeur par défaut de 16 pixels; au départ, 16px, 1rem et 1em désignent donc la même longueur.
La taille de police racine et les valeurs en rem
Le champ Taille de police racine (px) définit la base utilisée pour convertir une valeur en rem. Avec la valeur par défaut de 16px, une valeur de 32px correspond à 2rem (32 ÷ 16), et une valeur de 8px correspond à 0,5rem (8 ÷ 16). Si vous changez cette base pour la faire correspondre à celle utilisée ailleurs dans votre projet, la valeur affichée dans le champ Valeurs se recalcule aussitôt à partir de la nouvelle base.
Ce champ n'accepte qu'un nombre strictement supérieur à 0. Une saisie invalide déclenche le message « La taille de police racine doit être un nombre supérieur à 0. »
Le contexte em et ses valeurs
Une valeur en em ne se rapporte pas à la racine, mais à la taille de police de l'élément qui la contient — un contexte qui peut différer de la racine. Le champ Taille de police du contexte em (px) précise cette taille pour que la conversion en em soit exacte: avec un contexte réglé sur 20px, une valeur de 30px correspond à 1,5em (30 ÷ 20).
Comme pour la racine, ce champ doit contenir un nombre supérieur à 0. Une saisie invalide déclenche le message « La taille de police du contexte em doit être un nombre supérieur à 0. »
Modifier les valeurs et cas particuliers
Le champ Valeurs accepte un nombre en px, rem ou em, et affiche sa conversion dans les trois unités. Il accepte aussi les valeurs négatives en pixels. Si son contenu n'est pas un nombre valide, l'outil affiche le message « Saisissez un nombre à convertir. » plutôt qu'un résultat erroné.
Le tableau des valeurs courantes
Sous les champs de conversion figure un tableau intitulé « px → rem courants (base de 16px) », qui reprend une série de valeurs en pixels courantes et leur équivalent en rem, en supposant une racine de 16px — la base adoptée par la plupart des sites.
Confidentialité
Chaque conversion se fait dans votre navigateur. Rien de ce que vous saisissez n’est envoyé à BroBroGo.
À qui s'adresse cet outil
Ce convertisseur est utile pour convertir des valeurs fixes en pixels vers des unités relatives — rem ou em — dans un design réactif, ou pour comprendre comment une racine différente modifie les valeurs en rem. Il convient aussi pour calculer une valeur en em à partir de la taille de police d'un élément précis, ou pour s'assurer que des dimensions s'adaptent correctement lorsqu'un lecteur change sa taille de police par défaut.
Foire aux questions
Quelle est la différence entre px, rem et em? px est une longueur fixe. rem se mesure par rapport à la taille de police racine de la page: avec une racine de 16px, 1rem vaut 16px. em se mesure par rapport à la taille de police de l'élément qui le contient.
Pourquoi régler une taille de contexte em séparée de la racine? Parce qu'une valeur en em dépend de la taille de police de son propre élément, qui n'est pas toujours celle de la racine. Réglez le contexte em sur la taille de police de cet élément pour obtenir une conversion juste; laissez-le égal à la racine quand les deux coïncident.
Que faire si la racine de mon projet n'est pas 16px? Modifiez le champ de taille de police racine pour qu'il corresponde à la valeur utilisée dans votre CSS: la valeur en rem affichée se recalcule aussitôt à partir de cette nouvelle base.