Convertisseur PX en REM

Divisez la valeur en pixels par la taille de police racine : rem = px ÷ racine. Avec la racine par défaut du navigateur, 16px, on obtient 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem et 12px ÷ 16 = 0.75rem. Si votre feuille de style définit une autre racine, divisez par celle-ci : avec une racine de 10px, 24px font 2.4rem. La racine est la taille de police de l'élément html, pas celle de body ni celle de l'élément que vous stylez.

1rem équivaut à la taille de police racine, qui est de 16px par défaut dans tous les grands navigateurs. Ce n'est pourtant pas un nombre fixe. Si une feuille de style définit html { font-size: 62.5% }, 1rem passe à 10px, et si un visiteur augmente à 20px la taille de police par défaut dans les réglages de son navigateur, 1rem passe à 20px pour lui sur tous les sites qui ne touchent pas à la racine. Cette variabilité est tout l'intérêt de l'unité.

Multipliez par la taille de police racine : px = rem × racine. Avec la racine par défaut de 16px, 1.5rem × 16 = 24px, 0.875rem × 16 = 14px et 2.25rem × 16 = 36px. Quand vous comparez une intégration à une maquette, n'oubliez pas que le résultat correspond à un visiteur aux réglages par défaut ; une personne qui a choisi une taille par défaut plus grande voit toutes les valeurs rem agrandies en proportion.

Le rem se mesure toujours par rapport à la taille de police racine (html), donc 1.5rem a le même sens partout sur la page. Le em se mesure par rapport à une taille de police locale : pour la propriété font-size, c'est la taille de police du parent, et pour padding, margin, width et les autres longueurs, c'est la taille de police calculée de l'élément lui-même. C'est pourquoi le em se cumule quand on imbrique les éléments. Une liste à 0.875em dans une autre liste à 0.875em fait 0.875 × 0.875 = 0.766 de la taille extérieure, soit 12.25px en partant de 16px. Le rem ne se cumule jamais, c'est pourquoi on le choisit d'ordinaire pour les tailles de police, tandis que le em reste utile pour les espacements qui doivent suivre le texte qu'ils entourent, comme le padding d'un bouton.

Parce que le rem respecte la taille de police par défaut du visiteur. La plupart des navigateurs de bureau permettent d'augmenter cette valeur, et beaucoup de personnes malvoyantes le font ; ce réglage modifie la racine, donc tout ce qui est dimensionné en rem ou en em grandit avec lui. Une taille de police écrite en px ignore complètement ce réglage. Le zoom de la page agrandit px et rem de la même façon, donc la différence ne vient pas du zoom ; elle vient de la préférence de taille de police, le réglage que l'on choisit quand on veut un texte plus grand sans que tout le reste grandisse aussi.

62.5% des 16px par défaut font 10px. 1rem vaut donc 10px, et le calcul se résume à un simple décalage décimal : 24px font 2.4rem et 14px font 1.4rem. Comme c'est un pourcentage, la racine respecte toujours une taille par défaut plus grande chez le visiteur (une valeur par défaut de 20px donne une racine de 12.5px). Les contreparties : le texte tombe à 10px partout où vous oubliez de définir une taille, il faut donc body { font-size: 1.6rem } ; les composants tiers qui supposent une racine de 16px s'affichent à 62.5% de leur taille prévue ; l'échelle d'espacement de Tailwind rétrécit avec elle, si bien que p-4 passe à 10px ; et les media queries l'ignorent totalement. Ne définissez jamais la racine en px à la place (html { font-size: 10px }), car cela écrase le réglage du visiteur.

En général, non. Une bordure de 1px est un filet censé le rester. En 0.0625rem, elle grandit avec la racine jusqu'à des largeurs fractionnaires, comme 1.25px avec une racine de 20px, et les navigateurs arrondissent généralement l'épaisseur des bordures à des pixels physiques entiers, si bien que les traits peuvent sortir inégaux d'un élément à l'autre. Les bordures décoratives épaisses et les contours qui doivent suivre le texte peuvent très bien être en rem ou en em. C'est pourquoi le convertisseur par lots peut garder les valeurs de 1px en pixels tout en convertissant tout le reste.

Oui, mais il n'y a pas le même sens qu'ailleurs. Dans une media query, rem et em se mesurent tous deux par rapport à la taille de police initiale du navigateur, c'est-à-dire la valeur par défaut du visiteur (16px sauf s'il l'a modifiée), et jamais par rapport à la taille de police définie sur html. Ainsi, avec html { font-size: 62.5% }, @media (min-width: 48rem) bascule toujours à 768px avec les réglages par défaut, et non à 480px. Les points de rupture écrits en rem ou en em se décalent vers des fenêtres plus larges quand un visiteur augmente sa taille de police par défaut, si bien qu'un texte agrandi obtient la mise en page étroite, plus aérée, au lieu d'être tassé dans des colonnes. Par défaut, cette page ne touche pas aux media queries, et si vous choisissez de les convertir, elle divise par 16, quelle que soit la racine définie.

Parce que la plupart des tailles en pixels ne sont pas des fractions simples de la racine. 15px font 0.9375rem et 13px font 0.8125rem avec une racine de 16px, deux valeurs exactes ; 10px avec une racine de 18px font 0.5555 périodique. Quatre décimales gardent toute valeur à racine de 16px à moins de 0.0008px de l'original, bien en dessous de ce qu'un écran peut afficher, alors que deux décimales peuvent s'écarter jusqu'à 0.08px. Les zéros finaux sont supprimés, donc 1.5000 s'écrit 1.5.

Dans l'ensemble, oui, à condition de relire le résultat. Le convertisseur par lots est une transformation de texte soignée plutôt qu'un véritable analyseur CSS : il ignore les commentaires, les chaînes entre guillemets, les valeurs url(), les noms de classe échappés et les conditions des media queries, et convertit toutes les autres valeurs px qu'il trouve. Il ne peut pas voir où une valeur est utilisée, donc un point de rupture stocké dans une variable Sass ou passé à un mixin est converti là où il est écrit, tout comme un décalage background-position dans un sprite dimensionné en pixels. La liste des modifications montre chaque changement par ligne, alors vérifiez ces cas avant la mise en production.