Convertir px en rem

Saisissez une valeur dans n'importe quelle unité et obtenez son équivalent dans les autres. Par défaut, 1rem = 16px, la taille de police des navigateurs ; modifiez-la si votre CSS en utilise une autre. Vous pouvez aussi coller un bloc de CSS et convertir tous ses px en rem d'un coup.

Convertisseur d'unités

px
px
px
rem est relatif à la taille de police de l'élément racine (html) ; em et % à celle de l'élément parent ; 1pt = 1/72 de pouce = 1,333px ; 1vw = 1 % de la largeur de la fenêtre.

Table de correspondance

pxremempt%

Convertir un bloc de CSS de px en rem

px, rem et em : lequel utiliser ?

Le pixel (px) est une unité fixe. Le rem (« root em ») est relatif à la taille de police de l'élément html, qui est de 16px dans tous les navigateurs sauf si l'utilisateur la modifie : ainsi 1rem = 16px, 1,5rem = 24px et 0,875rem = 14px. Le em est relatif à la taille de police de l'élément parent, il se cumule donc quand on imbrique des éléments.

Utiliser des rem pour les tailles de police, les marges et les espacements respecte les réglages des personnes qui agrandissent la police du navigateur à cause de troubles de la vue, comme le recommandent les règles d'accessibilité WCAG. Les px restent pratiques pour les bordures fines et les ombres.

Formule pour passer de px en rem

rem = px ÷ taille de base. Avec la base par défaut de 16px : 24px ÷ 16 = 1,5rem. Et inversement, px = rem × 16. Certains projets définissent html { font-size: 62.5%; } pour que 1rem vaille 10px et que les calculs soient plus simples ; dans ce cas, saisissez 10 comme taille de base.

Les unités vw et vh valent 1 % de la largeur et de la hauteur de la fenêtre : utiles pour une typographie fluide avec clamp(), par exemple font-size: clamp(1rem, 2.5vw, 2rem).