| px | rem |
|---|
À propos de cet outil
Le rem (root em) est une unité de longueur CSS relative à la taille de police de l'élément racine <html>, tandis que px est un pixel d'appareil absolu. À la taille racine par défaut du navigateur de 16px, 1rem équivaut à 16px, donc 24px font 1.5rem et 10px font 0.625rem. Comme rem s'ajuste à la taille racine, changer la base recalcule d'un coup toutes les valeurs en rem — ce convertisseur vous permet de définir cette base et de traduire les valeurs dans les deux sens.
Utilisez-le pour migrer un design system basé sur px vers des unités rem évolutives, dimensionner la typographie et les espacements qui respectent le réglage de taille de police du navigateur d'un utilisateur, vérifier une échelle Tailwind ou de jetons de design, ou retrouver par rétro-ingénierie la valeur en pixels derrière une déclaration en rem dans la feuille de style d'autrui. Le tableau de référence vous donne en un coup d'œil l'équivalent en rem des paliers en px courants à la base que vous avez choisie.
rem est relatif à la taille de police de la racine (<html>), pas à l'élément parent — c'est la seule différence avec em, qui est relatif à son propre parent.
Questions fréquentes
Comment convertir px en rem ?
Divisez la valeur en pixels par la taille de police racine. À la racine par défaut de 16px, 24px ÷ 16 = 1.5rem et 10px ÷ 16 = 0.625rem. Changez la base et la même valeur en px correspond à un rem différent.
1rem fait-il toujours 16px ?
Seulement lorsque la taille de police racine est la valeur par défaut du navigateur de 16px. 1rem équivaut à la font-size définie sur l'élément <html>, donc si la racine est de 10px alors 1rem vaut 10px.
Quelle est la différence entre rem et em ?
rem est toujours relatif à la taille de police de la racine (<html>), il reste donc cohérent sur l'ensemble de la page. em est relatif à la taille de police de son propre élément/parent, de sorte que les valeurs em imbriquées se cumulent et peuvent dériver.