Convertisseur PX en REM

La valeur par défaut du navigateur est 16px.

Qu'est-ce que Convertisseur PX en REM

Un convertisseur px en rem traduit une taille CSS entre pixels et unités rem. Un rem équivaut à la taille de police racine de la page, que les navigateurs fixent à 16px par défaut, donc 16px vaut 1rem et 24px vaut 1,5rem. Tapez une valeur dans un champ et l'autre se met à jour en direct. Modifiez la case de la taille de police racine si votre projet utilise une base différente (une astuce courante consiste à régler la racine sur 62,5% pour que 10px égale 1rem).

Comment utiliser

  1. Réglez la taille de police racine si votre projet diffère de la valeur par défaut de 16px.
  2. Tapez une valeur en pixels dans le champ Pixels pour voir l'équivalent en rem.
  3. Ou tapez une valeur en rem dans le champ REM pour voir l'équivalent en pixels.
  4. Copiez n'importe quel résultat avec l'icône de copie à côté du champ.
  5. Cliquez sur Effacer pour réinitialiser les champs et démarrer une nouvelle conversion.

Quand l'utiliser

Vous construisez une mise en page responsive et vous avez besoin de votre titre de 24px en rem ? Tapez 24 et vous obtenez 1,5rem, prêt à coller dans votre feuille de style. Passer d'un design en pixels fixes à des rem évolutifs garde le texte et les espacements alignés sur le réglage du navigateur du lecteur, si bien que celui qui augmente sa taille de police par défaut voit toute la mise en page grandir avec lui au lieu de rester figée sur vos valeurs en pixels.

Questions fréquentes

Comment convertir px en rem ?

Divisez la valeur en pixels par la taille de police racine. Avec la racine par défaut de 16px, 24px vaut 24 / 16 = 1,5rem, et 8px vaut 8 / 16 = 0,5rem. Pour l'inverse, multipliez la valeur en rem par la taille de police racine : 1,25rem sur une racine de 16px vaut 1,25 * 16 = 20px.

Quelle est la taille de police racine par défaut ?

Les navigateurs utilisent 16px comme taille de police racine par défaut, donc cet outil démarre là. Si votre CSS modifie le font-size de l'élément html (par exemple à 62,5%, ce qui donne une racine de 10px), mettez à jour la case de la taille de police racine pour que la conversion corresponde à votre projet.

Pourquoi utiliser rem plutôt que px en CSS ?

Les unités rem s'adaptent à la taille de police racine, qui respecte la taille choisie par le lecteur dans les réglages de son navigateur. Dimensionner les polices, marges et espacements en rem permet à toute la mise en page de grandir ou rétrécir avec cette préférence, ce qui est meilleur pour l'accessibilité que des pixels figés.

Puis-je partager cet outil avec mes données pré-remplies ?

Oui. L'URL se met à jour pendant que vous tapez. Copiez le lien depuis la barre d'adresse ou utilisez le bouton Partager, quiconque l'ouvre verra vos données déjà remplies.

Outils connexes