Qu'est-ce qu'un convertisseur REM en PX ?
Un convertisseur REM en PX est un outil qui transforme les unités relatives REM (root em) en pixels (PX). En développement web, le REM est une unité relative qui se base sur la taille de police de l'élément racine (généralement l'élément <html>), tandis que le PX est une unité absolue. Ce convertisseur aide les développeurs à concevoir des interfaces fluides et accessibles, tout en visualisant à quelle valeur en pixels correspondent réellement leurs unités REM.
Quand utiliser le convertisseur REM en PX ?
Ce convertisseur s'avère particulièrement utile dans les situations suivantes :
- Lorsque vous concevez des sites web responsives et devez passer d'unités relatives à des unités absolues
- Lorsque vous travaillez avec des design systems exprimés en REM mais avez besoin des valeurs en pixels pour vous repérer
- Lorsque vous intégrez des maquettes dont les dimensions sont fournies en pixels, alors que vous préférez coder en REM
Comment calculer la conversion REM en PX
La conversion du REM en PX repose sur une formule toute simple :
PX = REM × taille de police racine
Où :
- PX correspond à la valeur obtenue en pixels
- REM est la valeur relative à convertir
- La taille de police racine est la taille de police de base de l'élément html (généralement 16px par défaut dans la plupart des navigateurs)
Comme la valeur du REM est relative à la taille de police racine, cela signifie que si vous définissez une font-size de 16px sur l'élément <html> dans votre CSS, par exemple ainsi :
Alors 1rem = 16px.
Exemples
Conversion REM en PX de base
Convertissons 1.5rem en pixels avec la taille de police racine par défaut de 16px.
| Valeur REM | Taille de police racine | Calcul | Résultat |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Convertir plusieurs valeurs REM
Convertissons 0.75rem, 2rem et 3.5rem en pixels avec une taille de police racine de 16px.
| Valeur REM | Taille de police racine | Calcul | Résultat |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Taille de police racine personnalisée
Convertissons 2.5rem en pixels avec une taille de police racine personnalisée de 20px.
| Valeur REM | Taille de police racine | Calcul | Résultat |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Tableau de conversion REM en PX courant
Voici un tableau de référence des valeurs REM les plus courantes converties en pixels (sur la base de la taille de police racine par défaut de 16px) :
| Valeur REM | Valeur en pixels |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
Calculateurs associés
Pour découvrir d'autres outils de développement et de design web, jetez un œil à ces calculateurs associés :
