Convertisseur PX en REM

Dans le développement Web, les pixels (px) sont des unités de taille fixe, ce qui signifie qu'ils ne s'adaptent pas aux paramètres de taille de police de l'utilisateur. REM (Root EM) est une unité relative, où 1 REM est égal à la taille de police de l'élément HTML racine (généralement la balise html). Cela rend les unités REM idéales pour créer des conceptions réactives qui s'adaptent aux préférences de l'utilisateur et aux différentes tailles d'écran.

La conversion entre REM et Pixels est une tâche courante pour les développeurs front-end afin d'assurer la cohérence et la réactivité dans leurs projets. La même logique de multiplication ou de division s'applique à d'autres conversions courantes, comme le Convertisseur de Poids pour les recettes ou les calculs d'expédition.

Convertir une valeur en pixels en rem utilise une formule : divisez par votre taille de police de base en pixels. La direction inverse, rem en px, multiplie la valeur en rem par cette même taille de police de base. La plupart des navigateurs utilisent 16px comme taille de police de base par défaut, sauf si une page la modifie.

Le champ Taille de Police de Base de cet outil vous permet de remplacer la valeur par défaut de 16px avant de convertir. Modifiez-la pour qu'elle corresponde à la taille de police racine de votre projet, et chaque résultat se recalcule instantanément. Si vous avez besoin de l'équivalent en pixels d'une hauteur de ligne en REM, essayez le Calculateur de Hauteur de Ligne.

Ces cinq exemples couvrent les conversions les plus courantes, d'une correspondance exacte 1:1 à l'astuce de la taille de police de base à 62,5 %. Chaque ligne montre la formule, le résultat et ce qu'il faut en faire.

Définir html {'{'} font-size: 62.5%; {'}'} réduit la taille de police racine de la valeur par défaut du navigateur de 16px à 10px. Comme 62,5 % de 16px équivaut à 10px, chaque 1rem équivaut alors à 10px au lieu d'une fraction peu pratique, comme le montre l'exemple de 24px à 2,4rem ci-dessus.

Les maquettes issues de Figma ou Sketch indiquent presque toujours les tailles de police en pixels, mais le CSS de production doit utiliser rem. Prenez la valeur en pixels de votre fichier de conception, convertissez-la avec l'outil ci-dessus, puis collez la valeur en rem dans votre feuille de style.

Les utilitaires d'espacement, de typographie et de taille de Tailwind CSS sont basés sur rem par défaut, en supposant la taille de police racine standard de 16px. Si votre projet définit une taille de police racine différente, les classes de Tailwind s'adaptent à cette valeur, sauf à l'intérieur des points de rupture des media queries.

/* Spécification Figma : font-size: 24px; */
font-size: 1.5rem;

Ce convertisseur fonctionne entièrement côté client, dans votre navigateur. Vos valeurs saisies ne sont jamais envoyées à un serveur, de sorte que chaque calcul reste privé pendant que vous travaillez.

Ce convertisseur traite certaines saisies différemment d'un simple nombre positif. Comprendre ces cas limites vous aide à faire confiance au résultat plutôt que de le remettre en question.

Si vous convertissez régulièrement d'autres unités techniques avec leurs propres particularités d'arrondi, le Convertisseur de Données couvre les octets, kilooctets et plus encore.

Choisir entre rem, px et em dépend de la question de savoir si une valeur doit respecter les préférences de taille de police de l'utilisateur. Si vous devez aussi convertir des unités de longueur absolues comme les pouces ou les centimètres, le Convertisseur de Longueur s'en charge séparément.

Le tableau ci-dessous compare le comportement de chaque unité face au zoom, aux paramètres d'accessibilité et aux cas d'usage courants. Une exception importante pour le design réactif : les unités rem à l'intérieur d'une media query CSS se résolvent toujours par rapport à la taille de police par défaut du navigateur, en ignorant toute taille de police racine personnalisée sur la page.