Ce que fait le convertisseur de px en rem et em
Cet outil convertit une valeur exprimée en pixels (px) vers ses équivalents en rem et en em, et inversement. Vous pouvez saisir une valeur dans n'importe laquelle des trois unités: dès que vous tapez, l'outil calcule et affiche automatiquement les deux valeurs correspondantes dans les autres unités. Il vous permet aussi de fixer votre propre taille de police racine et votre propre taille de police de contexte em, afin que les conversions correspondent aux réglages de votre projet plutôt qu'à des valeurs génériques. C'est utile pour transformer des dimensions fixées en pixels en unités relatives pour une mise en page adaptative, pour voir comment une taille de police racine différente change la valeur en rem d'un élément, pour calculer une valeur en em à partir de la taille de police d'un élément précis, ou simplement pour vérifier que vos dimensions s'ajusteront correctement lorsqu'une personne modifie la taille de police par défaut de son navigateur.
Les trois champs à remplir
L'interface propose trois zones de saisie. Le champ « Taille de police racine (px) » reçoit un nombre représentant la taille de police de base de la page, exprimée en pixels — c'est la référence utilisée pour tous les calculs en rem. Le champ « Taille de police du contexte em (px) » reçoit un nombre représentant la taille de police de l'élément concerné, également en pixels; c'est cette valeur qui sert de référence pour les conversions en em. Enfin, le champ « Valeurs » reçoit le nombre que vous voulez convertir: une longueur exprimée en px, en rem ou en em, selon l'unité de départ.
Ce que l'outil affiche en retour
Une fois vos données saisies, l'outil vous renvoie la taille de police racine que vous avez définie, la taille de police du contexte em que vous avez définie, ainsi que la valeur convertie dans les trois unités à la fois. Vous trouverez également un tableau intitulé « Conversions courantes px → rem (base de 16 px) », qui présente une série de valeurs en pixels courantes déjà converties en rem, en supposant une taille de police racine de 16 px. Ce tableau permet par exemple de voir en un coup d'œil que 24 px correspond à 1,5 rem lorsque la base est de 16 px, sans avoir à refaire le calcul soi-même.
Une conversion en temps réel, dans les deux sens
L'un des principes centraux de l'outil, c'est que modifier n'importe lequel des champs px, rem ou em met à jour les deux autres pendant que vous tapez. L'interface le résume ainsi: « Saisissez une valeur en px, rem ou em — les deux autres se mettront à jour au fil de votre saisie. » Au départ, avec les réglages par défaut, 16 px équivaut à 1 rem et à 1 em à la fois. Si vous entrez 32 px comme valeur avec une racine restée à 16 px, l'outil affichera 2 rem (32 divisé par 16). Changez la racine pour 20 px, et cette même valeur de 32 px devient 1,6 rem (32 divisé par 20): voilà comment une taille de police racine différente influence la valeur en rem. Le principe est identique pour le em: avec un contexte fixé à 18 px, une valeur de 27 px correspond à 1,5 em (27 divisé par 18). L'outil accepte aussi les pixels négatifs; avec une racine de 16 px, -16 px se convertit en -1 rem.
Valeurs par défaut, valeurs négatives et messages d'erreur
Par défaut, la taille de police racine est fixée à 16 px et la taille de police du contexte em l'est également à 16 px. La taille de police racine doit toujours être un nombre supérieur à 0: si vous y saisissez une valeur invalide, le message « La taille de police racine doit être un nombre supérieur à 0. » s'affiche. La même règle s'applique à la taille de police du contexte em, avec le message « La taille de police du contexte em doit être un nombre supérieur à 0. » Quant au champ « Valeurs », si ce que vous y saisissez n'est pas un nombre valide, l'outil affiche « Saisissez un nombre à convertir. » En dehors de ces deux tailles de référence, qui doivent rester positives, le champ « Valeurs » accepte pour sa part des pixels négatifs, ce qui est pratique si vous travaillez avec des dimensions ou des marges négatives.
Confidentialité des données saisies
Toute la conversion se déroule dans votre propre navigateur. Comme le précise l'outil: « Chaque conversion s'effectue directement dans votre navigateur. Rien de ce que vous saisissez n'est téléversé vers BroBroGo. » Les tailles de police et les valeurs que vous entrez ne quittent donc pas votre appareil pour être envoyées vers un serveur.
Foire aux questions
Quelle est la différence entre une valeur convertie en rem et une valeur convertie en em avec cet outil? La valeur en rem se calcule à partir du champ « Taille de police racine (px) », c'est-à-dire la taille de police de base de la page. La valeur en em, elle, se calcule à partir du champ « Taille de police du contexte em (px) », soit la taille de police propre à l'élément que vous visez. Ce sont deux références distinctes, d'où la présence des deux champs séparés.
Que se passe-t-il si je modifie la taille de police racine après avoir saisi une valeur en px? Le champ rem se recalcule aussitôt à partir de la nouvelle taille de police racine, sans que vous ayez à retaper votre valeur en pixels. C'est ce qui permet de comparer facilement l'effet de différentes tailles de police racine sur un même nombre de pixels.
L'outil accepte-t-il les valeurs négatives? Oui, le champ « Valeurs » accepte les pixels négatifs. Les champs de taille de police racine et de contexte em, en revanche, doivent rester des nombres supérieurs à 0.
Que faire si un message d'erreur apparaît dans un des champs? Vérifiez le type de nombre attendu selon le champ concerné: le champ « Valeurs » demande simplement un nombre, alors que la taille de police racine et la taille de police du contexte em doivent chacune être un nombre strictement supérieur à 0. Une fois la saisie corrigée, la conversion se met à jour automatiquement.