Outil Gratuit

Convertisseur PX en REM

Convertir les valeurs de pixels en REM et vice versa instantanément. Définissez n'importe quelle taille de police de base, consultez un tableau de conversion complet et copiez les propriétés CSS personnalisées ou un tableau en texte brut pour votre feuille de style.

Convertisseur PX ↔ REM

Entrez une valeur dans l'un ou l'autre champ — les deux se mettent à jour en direct en fonction de la taille de police de base.

px

Pixels (px)

px

REM

rem

CSS font-size racine

:root {
  font-size: 16px;
}

Valeurs courantes à la base 16px

pxrem
8px0.5rem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
32px2rem
36px2.25rem
40px2.5rem
48px3rem
56px3.5rem
64px4rem
72px4.5rem
80px5rem
96px6rem

Vos données restent dans votre navigateur — aucune donnée n'est envoyée à un serveur.

Qu'est-ce que REM et pourquoi l'utiliser ?

REM (root em) est une unité CSS relative à la taille de police de l'élément racine (<html>). Parce qu'elle s'adapte à la préférence de taille de police du navigateur de l'utilisateur, REM est préférée aux pixels pour la typographie, l'espacement et la mise en page — cela rend les sites plus accessibles et plus faciles à maintenir. La base par défaut du navigateur est 16px, donc 1rem = 16px sauf indication contraire.

L'astuce des 62,5 %

Définir :root { font-size: 62.5%; } rend 1rem égal à 10px (62,5 % de 16px), ce qui simplifie le calcul mental — 1,6rem = 16px, 2,4rem = 24px, et ainsi de suite. Cet outil vous permet d'entrer n'importe quelle base personnalisée pour prévisualiser les valeurs rem de votre mise en page en un coup d'œil.

Comment utiliser

  1. Définissez la taille de police de base (par défaut 16px, correspondant à la plupart des navigateurs).
  2. Tapez une valeur en pixels — l'équivalent en REM se met à jour instantanément.
  3. Ou tapez une valeur en REM — l'équivalent en pixels se met à jour instantanément.
  4. Faites défiler vers le bas pour voir le tableau de conversion pour les tailles courantes.
  5. Copiez le tableau en tant que propriétés CSS personnalisées ou texte brut pour votre projet.

Toutes les conversions s'exécutent dans votre navigateur — rien n'est envoyé à un serveur.

Depuis le blog Skybin

Free developer tools from Skybin

Lire le guide sur Skybin

Questions Fréquemment Posées

Quelle est la taille de police par défaut du navigateur ?
La plupart des navigateurs utilisent par défaut 16px pour la taille de police racine, ce qui signifie 1rem = 16px. Les utilisateurs peuvent modifier ce paramètre dans les paramètres de leur navigateur pour l'accessibilité, ce qui est exactement la raison pour laquelle rem est préféré aux valeurs px fixes.
Comment convertir mentalement px en rem ?
Divisez la valeur en pixels par la taille de police de base. Avec la base par défaut de 16px : 24px ÷ 16 = 1,5rem. Si vous utilisez l'astuce des 62,5 % (base = 10px) : 24px ÷ 10 = 2,4rem.
Dois-je utiliser rem ou em ?
REM est relatif à l'élément racine et est cohérent dans tout votre document. EM est relatif à l'élément parent le plus proche, ce qui peut augmenter de manière inattendue. REM est généralement préféré pour les tailles de police et l'espacement ; EM peut être utile pour le dimensionnement au niveau des composants.
Cet outil gère-t-il les valeurs non entières ?
Oui. Vous pouvez entrer des décimales comme 14,5px ou 0,875rem et le convertisseur les traitera avec précision.