Comment utiliser : Convertisseur PX en REM
- Définissez la taille de police racine (laissez 16 sauf si votre site modifie la taille de police de
html). - Saisissez une valeur dans Pixels, REM ou EM : les autres champs se mettent à jour instantanément.
- Utilisez le tableau des tailles courantes pour copier en un clic les valeurs rem les plus utilisées.
- Pour convertir une feuille de style entière, collez-la dans Votre CSS, choisissez les options et copiez le résultat.
Qu’est-ce qu’un rem ?
rem signifie « root em » : 1rem correspond à la taille de police de l’élément racine <html>. Les navigateurs la fixent par défaut à 16px, donc 1.5rem = 24px. La principale différence avec les pixels est que le rem respecte la préférence de taille de police du navigateur de l’utilisateur : une personne qui règle sa police par défaut à 20px verra le texte et les espacements s’agrandir proportionnellement, ce qu’une valeur px fixe ignorerait.
La formule de conversion
rem = px ÷ taille de police racine et px = rem × taille de police racine. Avec la racine par défaut de 16px : 12px = 0,75rem, 14px = 0,875rem, 18px = 1,125rem, 32px = 2rem. L’em utilise le même calcul mais divise par la taille de police de l’élément lui-même (pour font-size, celle de son parent), donc les em se cumulent lorsqu’ils sont imbriqués.
| Unité | Relative à | Idéale pour |
|---|---|---|
px | Rien : valeur fixe | Filets fins, ombres, petits détails |
rem | Taille de police racine (html) | Tailles de police, espacements, largeurs de mise en page |
em | Taille de police de l’élément courant | Marges intérieures qui suivent le texte d’un bouton, tailles d’icônes, media queries |
Convertir un fichier CSS complet
Le convertisseur de code repère chaque nombre suivi de px et le divise par votre base, tout en ignorant les commentaires, les chaînes entre guillemets et les chemins url(…) (ainsi bg-16px.png reste intact). Les valeurs de 1px sont conservées par défaut, car les bordures doivent rester nettes. Dans les media queries, les rem et em sont toujours calculés à partir de la taille de police par défaut du navigateur (généralement 16px), et non de votre règle html : cochez Ne pas modifier les @media si votre base est différente.
L’astuce du 62,5 % et pourquoi l’éviter
Définir html { font-size: 62.5%; } fait valoir 1rem = 10px pour faciliter les calculs, mais chaque composant doit alors recevoir des tailles de police explicites, et les widgets tiers s’affichent minuscules. Conserver la valeur par défaut de 16px et utiliser un convertisseur comme celui-ci est plus simple et plus sûr.
Le rem dans Webflow
Les menus déroulants d’unités de Webflow prennent en charge rem et em, et vous pouvez saisir 1.5rem directement dans un champ. Attention : une taille de police définie sur la balise Body (All Pages) de Webflow affecte le texte hérité et les em, mais pas les rem, qui se réfèrent toujours à l’élément html. Pour des valeurs qui s’adaptent à l’écran, générez-les avec le calculateur clamp().
Aussi recherché comme : px en rem, rem en px, px en em, convertisseur px rem, calculateur rem, taille de police rem, convertir pixels en rem, unités css.
Outils complémentaires : Convertisseur PX en REM
- Convertisseur d’unités — Convertissez les unités métriques, impériales et techniques dans dix catégories différentes, grâce à un convertisseur bidirectionnel et à un tableau regroupant toutes les unités en un seul coup d'œil.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
Questions fréquentes
Combien de pixels valent 1rem ?
html { font-size: 62.5% }, 1rem devient 10px ; si l’utilisateur augmente la taille de police de son navigateur, 1rem grandit en conséquence.Quelle est la différence entre rem et em ?
html, il est donc prévisible partout. L’em est relatif à la taille de police de l’élément courant, si bien que les em imbriqués se multiplient : 1,2em à l’intérieur d’un 1,2em donne 1,44 fois la taille du parent.Faut-il utiliser rem ou px pour les tailles de police ?
Les media queries doivent-elles utiliser px, em ou rem ?
html font-size.Le convertisseur de code peut-il casser mon CSS ?
px, et ignore les commentaires, les chaînes et les valeurs url(). Relisez le résultat une fois, notamment les valeurs comme les bordures en 1px, qui sont conservées par défaut.