Comment convertir des pixels en rem et em en CSS ? Formules et exemples responsive

Les différences entre px, rem et em

px est une unité fixe. rem dépend de la taille de police de l’élément racine, généralement <html>. em dépend de la taille de police héritée ou calculée dans le contexte de l’élément.

• px : valeur exprimée en pixels CSS.
• rem : relatif à la taille de police de <html>.
• em : relatif à la taille de police du parent ou de l’élément selon la propriété utilisée.

La valeur par défaut courante de la racine est de 16px, mais elle peut être modifiée par la feuille de style ou les préférences de l’utilisateur.

Comment convertir des px en rem ?

La formule est la suivante :

rem = valeur en px ÷ taille de police racine en px

Avec une racine définie à 16px :

32px ÷ 16px = 2rem
24px ÷ 16px = 1.5rem
12px ÷ 16px = 0.75rem

Exemple CSS

html {
  font-size: 16px;
}

.title {
  font-size: 32px;
}

La conversion équivalente est :

.title {
  font-size: 2rem;
}

2rem représente deux fois la taille de police effective de l’élément racine.

Tableau de conversion px vers rem

Comment convertir des rem en px ?

Pour effectuer la conversion inverse, multipliez la valeur en rem par la taille de police racine :

px = valeur en rem × taille de police racine en px

Avec une base de 16px :

1.5rem × 16px = 24px
2rem × 16px = 32px
0.75rem × 16px = 12px

Exemple

html {
  font-size: 16px;
}

.card {
  padding: 1.5rem;
}

Le remplissage correspond théoriquement à 24px. Si la taille de police racine change, la valeur calculée change également.

Comment convertir des px en em ?

La formule générale est :

em = valeur en px ÷ taille de police de référence en px

La référence varie selon la propriété CSS :

• Pour font-size, la référence est la taille de police héritée du parent.
• Pour padding, margin, width et d’autres propriétés, la référence est généralement la taille de police calculée de l’élément.

Conversion d’un padding en em

.card {
  font-size: 20px;
  padding: 24px;
}

Calcul :

24px ÷ 20px = 1.2em

Équivalent :

.card {
  font-size: 20px;
  padding: 1.2em;
}

Conversion d’une taille de texte en em

.parent {
  font-size: 18px;
}

.child {
  font-size: 24px;
}

La conversion de la taille de l’enfant se fait par rapport au parent :

24px ÷ 18px = 1.333em

.child {
  font-size: 1.333em;
}

Les valeurs en em peuvent donc se cumuler dans des éléments imbriqués. C’est l’une des principales différences avec rem, qui reste relatif à la racine.

Faut-il utiliser rem ou em ?

Privilégier rem pour une échelle globale

rem convient aux tailles de texte, titres, espacements et dimensions qui doivent rester cohérents à l’échelle du site.

:root {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

section {
  padding: 2rem;
}

Utiliser em pour un composant autonome

em est pratique lorsque les espacements doivent évoluer avec la taille de texte du composant, notamment pour les boutons.

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
  border-radius: 0.5em;
}

Si la taille de police du bouton augmente, son remplissage et son arrondi évoluent aussi.

Exemple responsive avec des rem et une media query

html {
  font-size: 16px;
}

.container {
  padding: 1rem;
}

h1 {
  font-size: 1.75rem;
}

@media (min-width: 48rem) {
  .container {
    padding: 2rem;
  }

  h1 {
    font-size: 2.5rem;
  }
}

Avec une racine à 16px, 48rem équivaut théoriquement à :

48 × 16px = 768px

La règle s’applique donc à partir d’une largeur de 768px, si la taille de police racine reste de 16px.

Créer une taille responsive avec clamp()

clamp() définit une valeur minimale, une valeur flexible et une valeur maximale :

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

• 1.75rem est la valeur minimale ;
• 4vw permet une évolution selon la largeur de la fenêtre ;
• 3rem est la valeur maximale.

Exemple complet

:root {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.article {
  width: min(90%, 70rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 3rem);
}

Méthode rapide pour convertir des pixels

1. Identifiez la référence : <html> pour rem, parent ou élément courant pour em.
2. Relevez sa taille de police effective en pixels.
3. Divisez la valeur à convertir par cette référence.
4. Arrondissez à trois ou quatre décimales si nécessaire.
5. Testez le résultat avec différentes tailles de texte et largeurs d’écran.

Exemples rapides

Pour convertir 28px en rem avec une base de 16px :

28 ÷ 16 = 1.75rem

Pour convertir 20px en em dans un composant dont la taille de référence est 16px :

20 ÷ 16 = 1.25em

Points de vigilance

• 1rem ne vaut pas toujours 16px : tout dépend de la taille effective de la racine.
• 1em peut avoir une valeur différente selon l’élément.
• Les em peuvent produire un effet cumulatif dans une structure imbriquée.
• Les unités relatives favorisent l’adaptation aux préférences de taille de texte.
• Un design responsive peut combiner rem, em, clamp(), Flexbox, Grid et des media queries.