Convertisseur PX en REM
Pour convertir des px en rem, divisez la valeur en pixels par la taille de police racine : rem = px / racine. Avec la racine par défaut du navigateur, 16px, on a 24px / 16 = 1.5rem. Changez la base ci-dessous – 14px pour Ant Design, 10px pour l'astuce des 62,5 % – et les valeurs rem et em la suivent ; la valeur en points, elle, suit les pixels, car 1px vaut toujours 0,75pt.
Convertir px, rem, em et pt, puis examiner les dimensions remplacées dans le CSS.
Racine positive ; valeurs absolues ≤1 milliard ; résultats arrondis à six décimales. Aperçu limité à 8–72px. CSS ≤100 000 caractères. Seuls les jetons px non cités des valeurs sont convertis ; commentaires, chaînes, URL et déclarations content sont conservés. Vérifiez le résultat : ce convertisseur lexical limité ne valide pas le CSS. Les nombres CSS avec exposant (par exemple 1e+3px ou 1e-3px) restent entièrement inchangés.
La conversion se fait dans cette page, sans envoyer les nombres ou le CSS saisis à un service de conversion.
Le champ em suppose que l'élément hérite de la taille de police de base ci-dessus. En CSS, em se calcule d'après la taille de police de l'élément lui-même – et d'après celle du parent lorsque vous l'utilisez dans la propriété font-size.
Conversion en lot : collez du CSS ou une liste de valeurs en px
Chaque valeur en px est réécrite en rem d'après la taille de police de base ci-dessus.
Copié
Échec de la copie. Sélectionnez le résultat et copiez-le manuellement.
Comment convertir des px en rem ?
La formule est rem = px / taille de police racine, et l'inverse px = rem x taille de police racine. Seule la taille de police de l'élément html racine compte, quelle que soit la profondeur d'imbrication de l'élément, et c'est ce qui rend le calcul en rem prévisible. Avec la racine par défaut de 16px : 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem et 40px = 2.5rem.
N'arrondissez pas le résultat. 15px valent exactement 0.9375rem avec une racine de 16px ; arrondir à 0.94rem porte la taille rendue à 15.04px et casse l'alignement d'une grille. Les navigateurs calculent les longueurs sous-pixel et les alignent sur la grille de pixels de l'appareil au moment du rendu : copiez donc la valeur exacte donnée par le convertisseur. Le convertisseur affiche jusqu'à six décimales : exactes pour les racines qui tombent juste, comme 16px et 10px, et précises au millionième de rem pour une racine comme 14px qui ne tombe pas juste.
Table px vers rem pour des racines de 16px, 14px et 10px
Une même valeur en pixels donne trois valeurs en rem différentes selon la racine définie par votre projet ; cette table les donne toutes les trois, avec l'équivalent en points (CSS définit 1px comme 1/96 de pouce et 1pt comme 1/72, donc 1px = 0.75pt). Les colonnes 16px et 10px sont exactes. Avec une racine de 14px, la division tombe rarement juste : ces valeurs sont arrondies à quatre décimales et signalées par le signe d'approximation, tandis que le convertisseur ci-dessus affiche plus de décimales.
| Pixels | rem (racine 16 px) | rem (racine 14 px) | rem (racine 10 px) | Points |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem ou em : quelle unité choisir ?
Le partage pratique : rem pour tout ce qui doit suivre la taille de texte du lecteur, em pour les valeurs qui doivent suivre la taille de police de l'élément lui-même, et px uniquement là où une longueur doit rester physiquement fixe. La colonne d'exemple suppose une racine de 16px et un parent à 16px.
| Unité | Relative à | 20px équivaut à | Idéale pour | Suit la taille de texte du lecteur |
|---|---|---|---|---|
| px | Rien : unité absolue (1px = 1/96 de pouce) | 20px | Bordures d'un pixel, anneaux de focus, tailles d'icônes exactes | Non |
| rem | La taille de police de l'élément html racine | 1.25rem | Tailles de police, espacements, points de rupture, échelles typographiques | Oui |
| em | La taille de police de l'élément lui-même (celle du parent pour font-size) | 1.25em | Un remplissage qui doit grandir avec le libellé qu'il entoure | Oui |
| % | La valeur du parent pour cette propriété | 125% | Largeurs fluides et anciennes cascades de font-size | Oui (font-size) |
Faut-il utiliser px ou rem pour les marges intérieures, les marges et les bordures ?
Utilisez rem pour les marges intérieures et extérieures qui doivent respirer quand le texte grandit : remplissage des boutons, gouttières des cartes, espacement des sections, écarts de grille. Gardez px pour les traits fins. Une bordure de 1px vaut un pixel indépendant de l'appareil, bien net, alors que la même bordure écrite 0.0625rem peut être arrondie à zéro ou devenir floue à certains niveaux de zoom, et il en va de même pour les anneaux de focus et les séparateurs de 2px. C'est pourquoi la conversion en lot ci-dessus laisse par défaut les valeurs 1px et 2px intactes et réécrit tout le reste.
Les media queries sont l'autre endroit où rem fait la différence. Dans une media query, rem se calcule d'après la taille de police initiale du navigateur et non d'après votre règle html : un point de rupture à 48rem vaut 768px pour un lecteur aux réglages par défaut et grandit pour celui qui a augmenté sa taille de texte. Un point de rupture en px, lui, ne bouge jamais.
Comment convertir des px en rem dans Figma, VS Code et Tailwind ?
Figma mesure en px, mais le Dev Mode peut produire des rem : ouvrez les réglages d'Inspect, choisissez « Set unit scale » et saisissez votre taille de police racine (1rem = 16px par défaut). Les extensions VS Code comme cssrem convertissent via l'autocomplétion et exposent la racine dans les réglages – cssrem.rootFontSize, 16 par défaut – vérifiez donc qu'elle correspond avant de faire confiance au résultat sur un projet en 14px. Pour un fichier entier, collez-le dans le champ de conversion en lot ci-dessus après avoir réglé la base. L'échelle par défaut de Tailwind est déjà en rem avec une racine de 16px : une unité d'espacement vaut 0.25rem (4px), donc 16px donne 4, 24px donne 6 et 40px donne 10.
Sources
À propos de Convertisseur PX en REM
Convertir px, rem, em et pt, puis examiner les dimensions remplacées dans le CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Racine positive ; valeurs absolues ≤1 milliard ; résultats arrondis à six décimales. Aperçu limité à 8–72px. CSS ≤100 000 caractères. Seuls les jetons px non cités des valeurs sont convertis ; commentaires, chaînes, URL et déclarations content sont conservés. Vérifiez le résultat : ce convertisseur lexical limité ne valide pas le CSS. Les nombres CSS avec exposant (par exemple 1e+3px ou 1e-3px) restent entièrement inchangés.
Cas d'utilisation
Comment utiliser
Réglez la racine, modifiez une unité, puis collez éventuellement du CSS. L’option ≤2px conserve les petites dimensions ; le CSV contient les paires numériques uniques converties.
Racine positive ; valeurs absolues ≤1 milliard ; résultats arrondis à six décimales. Aperçu limité à 8–72px. CSS ≤100 000 caractères. Seuls les jetons px non cités des valeurs sont convertis ; commentaires, chaînes, URL et déclarations content sont conservés. Vérifiez le résultat : ce convertisseur lexical limité ne valide pas le CSS. Les nombres CSS avec exposant (par exemple 1e+3px ou 1e-3px) restent entièrement inchangés.
Astuces Pro
- Racine positive ; valeurs absolues ≤1 milliard ; résultats arrondis à six décimales. Aperçu limité à 8–72px. CSS ≤100 000 caractères. Seuls les jetons px non cités des valeurs sont convertis ; commentaires, chaînes, URL et déclarations content sont conservés. Vérifiez le résultat : ce convertisseur lexical limité ne valide pas le CSS. Les nombres CSS avec exposant (par exemple 1e+3px ou 1e-3px) restent entièrement inchangés.
- rem = px / taille racine ; em suppose ici le même contexte que la racine ; pt = px × 0,75 à 96 pixels CSS par pouce.
Questions fréquemment posées
Ici le contexte em est supposé égal à la racine. En CSS, em dépend de la taille de police concernée et peut varier dans les éléments imbriqués.
Les chaînes, commentaires, fonctions URL et la propriété content sont conservés. Vérifiez la feuille de style ; le CSS complexe ou mal formé n’est pas validé.