À quoi ça sert
Cet outil convertit les longueurs CSS entre pixels et unités relatives rem et em. Saisissez une valeur comme 24px pour obtenir 1.5rem, listez plusieurs valeurs une par ligne pour les convertir d’un coup, ou collez une feuille de styles entière : toutes ses valeurs px sont réécrites sur place. Une table de référence affiche les tailles courantes de 1px à 128px pour votre taille de base. Rien ne quitte votre navigateur.
Mode d’emploi
- Collez du CSS ou saisissez une valeur par ligne. Les nombres sans unité sont lus comme des px (ou des rem/em quand le sens est inversé), et une valeur écrite dans l’autre unité est convertie dans l’autre sens.
- Réglez la Taille de police de base. Tous les navigateurs utilisent 16px par défaut ; certains projets écrivent
html { font-size: 62.5% }pour que 1rem = 10px. - Choisissez le Sens (px → rem ou rem → px), l’Unité (rem ou em) et le nombre de Décimales à garder.
- Au besoin, utilisez Garder en px en dessous de pour laisser en px les bordures de 1px et autres filets.
- Copiez le résultat avec le bouton situé au-dessus.
Exemple
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }Les valeurs qui ne sont pas en px, comme les pourcentages, les couleurs, les noms de fichiers dans url() et les classes comme .mt-16px, ne sont pas modifiées. 0px devient 0.
px, rem et em
- px est une unité absolue : elle ignore la taille de police préférée du lecteur.
- rem (« root em ») est un multiple de la taille de police de l’élément
html. Si le lecteur règle son navigateur sur 20px, 1rem vaut 20px et toute la mise en page suit. - em est un multiple de la taille de police de l’élément courant. Pratique pour les espacements qui doivent suivre leur texte, mais les em imbriqués se multiplient : rem est donc le choix par défaut le plus sûr.
Les media queries sont converties aussi : @media (min-width: 768px) devient 48rem (ou 48em), ce qui garde des points de rupture cohérents quand le lecteur agrandit le texte. Dans les media queries, rem et em se rapportent à la taille de police par défaut du navigateur, pas à votre règle html.
FAQ
› Comment convertir des px en rem ?
Divisez la valeur en pixels par la taille de police racine. Avec la valeur par défaut des navigateurs, 16px, 24px ÷ 16 = 1.5rem et 12px ÷ 16 = 0.75rem. Pour revenir en arrière, multipliez : 2rem × 16 = 32px.
› Quelle différence entre rem et em ?
rem est relatif à la taille de police de l’élément racine html : 1rem a donc la même taille partout sur la page. em est relatif à la taille de police de l’élément courant (ou de son parent pour font-size lui-même), si bien qu’il se multiplie quand les éléments sont imbriqués. Utilisez rem pour la plupart des tailles et em quand un élément doit suivre son propre texte, comme le padding d’un bouton.
› Pourquoi utiliser rem plutôt que px ?
Quand un lecteur augmente la taille de police par défaut dans les réglages de son navigateur, les tailles en rem grandissent avec elle, alors que les px restent fixes. rem garde la mise en page accessible et permet de redimensionner tout un design en changeant une seule valeur racine.
› Faut-il convertir les bordures de 1px ?
En général non. Un filet de 0.0625rem peut devenir flou ou disparaître à certains niveaux de zoom. Réglez « Garder en px en dessous de » sur 2px et le convertisseur laissera les bordures et autres valeurs minuscules en px.