Convertir des pixels en rem avec la bonne taille de police racine

Pour convertir des pixels CSS en rem, divisez la valeur en pixels par la taille de police de l’élément racine : valeur en rem = valeur en px ÷ taille racine en px. Avec une racine de 16 px, 24 px correspondent à 1,5 rem. Avec une racine de 20 px, les mêmes 24 px correspondent à 1,2 rem.

Le convertisseur PX vers REM effectue cette division. Son champ racine démarre à 16, mais il ne lit pas votre feuille de style. Vérifiez donc la base avant de convertir une typographie ou un espacement.

Trouver la taille racine de votre page

Un rem se réfère à la taille de police de l’élément racine, généralement html. La valeur de 16 px est courante, sans être universelle : les styles du site et les préférences du navigateur peuvent la modifier. MDN explique cette référence de l’unité rem.

1. Ouvrez la page de votre projet dans le navigateur. Inspectez l’élément html avec les outils de développement.
2. Dans le panneau des styles calculés, cherchez font-size et relevez sa valeur en pixels. Ne prenez pas celle de body ou du titre que vous souhaitez convertir.
3. Autre méthode : dans la console de cette même page, exécutez getComputedStyle(document.documentElement).fontSize. Une réponse « 20px » indique une base de 20 pour le convertisseur.
4. Vérifiez de nouveau la valeur si une règle responsive ou un réglage change la taille racine. La mesure décrit la page dans son état actuel.

Cette méthode utilise les styles réellement appliqués, comme le précise la documentation de getComputedStyle.

Convertir puis appliquer la valeur

1. Saisissez 24 dans le champ des pixels CSS, sans ajouter px.
2. Saisissez la base relevée, par exemple 16. La base doit être strictement positive ; la valeur à convertir peut être nulle, mais pas négative.
3. Lancez la conversion. L’outil affiche « 24px ÷ 16px = 1.5rem ». Pour une déclaration CSS, reprenez uniquement 1.5rem, par exemple « font-size: 1.5rem; ».
4. Contrôlez le rendu sur votre page. Si la racine vaut 20 px, utilisez le résultat 1.2rem pour retrouver 24 px. Garder 1.5rem produirait alors 30 px.

En français, on écrit 1,5 dans une explication ; le code CSS exige le point décimal : 1.5rem. Les pixels de cette conversion sont des pixels CSS, pas les pixels physiques de l’écran. N’appliquez aucun multiplicateur lié à sa densité. MDN détaille cette distinction.

Comprendre la différence entre rem et em

Les rem permettent de partager une référence commune entre composants. Les em suivent la taille de police de l’élément ; dans une déclaration font-size, ils suivent celle du parent. Des tailles de texte en em peuvent donc se multiplier avec l’imbrication. Choisissez em si cette dépendance au composant est voulue, rem si vous souhaitez une référence à la racine. Le module CSS Values and Units définit ces unités.

Éviter les erreurs de base et de précision

Ne changez pas la taille racine uniquement pour faire tomber un calcul juste : vous modifieriez aussi les dimensions en rem déjà présentes. Corrigez plutôt la base saisie et recalculez.

Le résultat est arrondi à six décimales au maximum. Ainsi, 17 px avec une racine de 18 px donnent 0.944444rem. Les zéros finaux inutiles ne sont pas conservés.

Une très petite valeur peut disparaître à l’affichage : 0.000001 px ÷ 16 produit 0rem après arrondi. Cela ne signifie pas que le quotient mathématique est nul. Vérifiez avant de remplacer une valeur fine dans votre CSS. Les nombres non finis et les résultats dépassant la plage numérique prise en charge sont refusés.

Vérifier aussi le redimensionnement du texte

Utiliser rem ne garantit pas l’accessibilité. Testez le zoom jusqu’à 200 %, ainsi que l’agrandissement du texte et les préférences de police : titres, boutons et champs doivent rester lisibles et utilisables. Surveillez le texte coupé ou superposé dans les conteneurs rigides. Une dimension en px n’est pas automatiquement inaccessible : le zoom global l’agrandit aussi. Le critère WCAG 1.4.4 porte sur le redimensionnement sans perte de contenu ni de fonctionnalité, pas sur l’emploi obligatoire d’une unité.

Questions fréquentes

Combien de rem représentent 16 px ?

1rem avec une racine de 16 px ; 0.8rem avec une racine de 20 px. Il faut connaître la base pour répondre.

Faut-il convertir toutes les valeurs px en rem ?

Non. Choisissez l’unité selon le comportement recherché : suivre la typographie racine, celle du composant ou conserver une longueur CSS indépendante de la police.

Pourquoi mon résultat diffère-t-il de celui du convertisseur ?

Vérifiez la taille calculée de html, les règles CSS qui remplacent votre déclaration et l’arrondi. Le convertisseur calcule seulement à partir des deux valeurs fournies.