Aussi disponible en : English · Español · Português · العربية
Convertisseur px vers rem
Convertissez entre px et rem avec la taille racine de votre choix, et découvrez pourquoi cette racine est une décision et non une constante.
Qu’est-ce qu’un convertisseur px vers rem ?
Un pixel est une longueur absolue. Un rem est relative : il désigne la taille de police de l’élément racine, c’est-à-dire l’élément html sur toute page web. Passer de l’un à l’autre est une division — px divisé par la racine donne des rem, rem multiplié par la racine donne des px — et la seule question est de savoir ce que vaut réellement cette racine.
Presque tous les convertisseurs répondent 16 et passent à la suite. C’est le chiffre livré par les navigateurs, et il tombe juste la plupart du temps, mais c’est une valeur par défaut du navigateur et non une exigence de la norme. CSS définit la valeur initiale de font-size par le mot-clé medium et laisse au navigateur le soin de décider à combien de pixels cela correspond. La spécification ne fixe nulle part de valeur en pixels pour cela.
La racine est donc ici un réglage et non une constante. Modifiez-la et la conversion, le tableau de référence et le panneau de mise à l’échelle suivent : c’est la façon honnête de présenter une unité dont tout l’intérêt est de bouger.
Comment utiliser le convertisseur
- Choisissez le sens et saisissez votre valeur. De px vers rem pour reprendre une maquette, de rem vers px pour vérifier ce qu’une feuille de style va réellement rendre. Tout se met à jour à la frappe.
- Réglez la taille de police racine. Laissez-la à 16 pour coller au réglage habituel des navigateurs, ou déplacez-la pour voir ce que votre feuille de style donne à quelqu’un qui a choisi un texte plus grand. Le tableau ci-dessous se recalcule selon votre choix.
- Lisez le panneau de mise à l’échelle avant de copier quoi que ce soit. Il montre ce que trois déclarations de racine différentes donnent à un lecteur pour chaque réglage de navigateur, et le panneau em juste en dessous montre ce qui se passe si vous employez em.
Pourquoi rem est recommandé, et comment en annuler l’intérêt par mégarde
Si les recommandations d’accessibilité désignent rem, c’est parce qu’il hérite de la décision du lecteur lui-même. Celui qui a réglé le texte de son navigateur sur 24px vous dit qu’il lui faut un texte une fois et demie plus grand que par défaut, et une mise en page construite en rem le lui donne partout d’un coup.
Il est facile de jeter cela par-dessus bord en une ligne. Écrire html { font-size: 16px } remplace le réglage du lecteur par le vôtre. Dès lors, tous les rem de la page se résolvent sur 16 quoi qu’il ait choisi : notre lecteur à 24px reçoit exactement deux tiers de ce qu’il a demandé — un tiers de moins — et aucun rem plus loin dans la feuille de style ne le rattrape. Les unités sont relatives ; ce à quoi elles se rapportent vient de devenir une constante.
Les pourcentages n’ont pas ce défaut, et c’est là que le folklore se trompe. L’astuce des 62,5 %, qui pose html { font-size: 62.5% } pour que 1rem vaille de commodes 10px, est souvent présentée comme un danger pour l’accessibilité. Elle ne l’est pas. Un pourcentage multiplie ce que le lecteur a choisi : à son réglage par défaut il donne 10px, à 24px il donne 15px, et toute la page suit exactement comme il faut. Ce qui casse l’accessibilité, c’est l’unité et non le nombre : px fige, le pourcentage suit.
Le tableau de mise à l’échelle de cette page fait le calcul pour vous sur cinq réglages de navigateur. La seule ligne qui reste jamais en deçà est celle du pixel figé.
Pourquoi pas em, et une règle de la norme à connaître
em paraît interchangeable avec rem et se comporte tout autrement. em est relatif à la taille de police de l’élément sur lequel il est employé : l’imbrication multiplie donc. Quatre niveaux d’éléments réglés chacun à 1.25em ne ressortent pas 25 % plus grands que la base : ils ressortent à 1,25 puissance quatre, soit 2,44 fois, et le dernier fait près de deux fois et demie la taille que vous pensiez spécifier. Le panneau em ci-dessus affiche la chaîne pour le facteur que vous saisissez.
rem ne se cumule pas, puisque tous les rem de la page se mesurent sur la même racine. Cette seule différence est la raison d’être de l’unité, et c’est tout le fondement du conseil habituel : em pour ce qui doit réellement suivre son contexte local, comme le remplissage d’un bouton qui grandit avec son libellé, et rem pour tout ce que vous voulez prévisible.
Une règle mérite d’être connue parce qu’elle semble devoir être circulaire et ne l’est pas. Lorsque rem figure dans le font-size de l’élément racine lui-même, il renvoie à la valeur initiale de cette propriété et non à elle-même. Ainsi html { font-size: 2rem } vaut le double de la valeur initiale et ne récurse pas. C’est un recoin que vous fréquenterez peu, mais c’est un comportement défini et non indéfini.
Limites honnêtes
Cet outil ne peut pas vous dire quelle est la taille de police racine d’un lecteur donné. Rien ne le peut de l’extérieur : c’est précisément l’objet du réglage. Ce qu’il peut faire, c’est vous montrer ce que votre feuille de style lui donne pour chaque valeur plausible, afin que vous jugiez si votre maquette y résiste.
Les valeurs en rem sont affichées à quatre décimales et ne sont pas arrondies davantage, car 15px avec une racine de 16px font exactement 0,9375rem, et 0,94rem est une autre taille. Lorsqu’une valeur ne tombe pas sur un nombre propre, l’outil le signale plutôt que d’arrondir en douce, et toute valeur affichée se reconvertit en le pixel dont vous êtes parti.
Une chose sort de son périmètre : le zoom du navigateur n’est pas la même chose qu’une préférence de taille de police. Le zoom agrandit tout, pixels compris, si bien qu’une maquette en px grossit aussi au zoom — et c’est justement pourquoi elle peut sembler correcte à qui la teste au zoom tout en échouant pour le lecteur qui a modifié sa taille de texte par défaut. Ce sont deux réglages distincts et rem n’en suit qu’un.
Pourquoi est-ce gratuit ?
Parce qu’une division ne nous coûte rien. L’outil entier tient en quelques kilo-octets de JavaScript exécutés dans votre propre navigateur : aucune valeur n’est envoyée, rien n’est conservé, et aucun serveur n’intervient pour voir ce que vous concevez.
Il n’y a donc ni compte, ni inscription, ni limite. Convertissez les espacements de tout un design system si vous voulez ; c’est aussi gratuit la millième fois que la première.