Convertisseur de PX en REM

Tableaux de conversion de PX en REM

Pixels (PX) en REM

Pixels REM
1px 0.0625rem
2px 0.125rem
3px 0.1875rem
4px 0.25rem
5px 0.3125rem
6px 0.375rem
8px 0.5rem
10px 0.625rem
12px 0.75rem
14px 0.875rem
15px 0.9375rem
16px 1rem
18px 1.125rem
20px 1.25rem
24px 1.5rem
25px 1.5625rem
28px 1.75rem
32px 2rem
36px 2.25rem
40px 2.5rem
44px 2.75rem
48px 3rem
50px 3.125rem
56px 3.5rem
64px 4rem
72px 4.5rem
75px 4.6875rem
80px 5rem
90px 5.625rem
100px 6.25rem

REM en Pixels (PX)

Présuppose une taille de police par défaut du navigateur standard de 16px

REM Pixels
0.01rem 0.16px
0.03rem 0.48px
0.05rem 0.8px
0.08rem 1.28px
0.1rem 1.6px
0.15rem 2.4px
0.2rem 3.2px
0.5rem 8px
1rem 16px
2rem 32px
3rem 48px
4rem 64px
5rem 80px
6rem 96px
8rem 128px
10rem 160px
15rem 240px
20rem 320px
30rem 480px
40rem 640px
50rem 800px
60rem 960px
80rem 1280px
100rem 1600px

Conversion de PX en REM en CSS

PX (pixels) et REM (root em) sont deux unités utilisées pour définir les tailles des éléments dans les feuilles de style en cascade (CSS). Comprendre comment effectuer la conversion entre ces deux unités est crucial pour créer des pages web responsives et adaptables.

Voici une explication détaillée de la conversion de PX en REM :

1. Unités :

  • PX (Pixels) est une unité absolue représentant un nombre fixe de pixels à l’écran. Elle est indépendante des paramètres de taille de police de l’utilisateur.
  • REM (Root Em) : Une unité relative basée sur la taille de police de l’élément racine HTML. Par défaut, la taille de police racine est de 16px dans la plupart des navigateurs. Ainsi, 1rem équivaut à 16px.

2. Pourquoi utiliser REM ?

  • Réactivité : REM permet aux éléments de s’adapter proportionnellement aux préférences de taille de police de l’utilisateur. Ceci est essentiel pour la conception web responsive, garantissant que votre site web s’adapte à différentes tailles d’écran et préférences utilisateur.
  • Maintenabilité : L’utilisation de REM dans vos feuilles de style facilite le maintien de tailles de police cohérentes sur l’ensemble de votre site web. La modification de la taille de police racine ajuste automatiquement tous les éléments basés sur REM.

3. Formule de conversion :

Pour convertir les PX en REM, divisez la valeur en pixels par la taille de police racine (généralement 16px) :

rem_value = px_value / root_font_size

Par exemple, pour convertir 24px en rem en supposant une taille de police racine de 16px :

rem_value = 24px / 16px = 1.5rem

4. Points importants :

  • La conversion dépend de la taille de police racine. Si vous modifiez la taille de police racine dans votre CSS, les valeurs REM auront un effet différent.
  • Les navigateurs utilisent généralement une taille de police racine par défaut de 16px. Cependant, il est recommandé de définir explicitement la taille de police racine dans votre CSS pour un meilleur contrôle.
  • Bien que le REM offre des avantages en termes de réactivité, il peut y avoir des situations où le PX pourrait être préféré, comme pour les éléments de taille fixe tels que les icônes ou les bordures.

5. Considérations supplémentaires :

  • Compatibilité des navigateurs : Bien que le REM soit largement pris en charge, il est toujours judicieux de vérifier la compatibilité avec les navigateurs plus anciens.
  • Éléments imbriqués : Lors de l’utilisation de REM dans des éléments imbriqués, l’héritage de la taille de police s’applique. La valeur REM est relative à la taille de police de l’élément parent le plus proche, et non à la taille de police racine.