Convertir rem en px Root em ↔ Pixels Gratuit En ligne Sûr
Saisissez une valeur en rem et lisez-la aussitôt en px. Le calcul se fait dans votre navigateur, rien n'est envoyé nulle part, et ce dont dépend le résultat est écrit plus bas plutôt que supposé.
Rien n'est envoyé
Tailles courantes — Convertir rem en px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
D'où viennent ces unités
Le pixel de CSS n'est pas le pixel de votre écran. Quand les affichages ont cessé d'avoir une densité prévisible, une page mesurée en vrais pixels est devenue une page qui rapetissait à mesure que les écrans s'affinaient ; on a donc redéfini le pixel CSS comme une longueur de référence : environ 1/96 de pouce, vu à une distance de lecture confortable. Tout le reste de cette page repose là-dessus. L'em est plus vieux que le web — en typographie plomb, c'était la largeur d'un bloc fondu, nommé d'après le M capital — et il signifie en CSS la taille de police en vigueur, raison pour laquelle il change quand on imbrique les éléments. Le rem fut ajouté pour y échapper : c'est l'em de l'élément racine, et il ne se compose jamais. Le vw est venu avec le responsive : un centième de la largeur de la fenêtre, quelle qu'elle soit.
Où vous les rencontrez
Ce sont les unités de toute feuille de style. Les pixels dimensionnent bordures, ombres et tout ce qui ne doit pas s'échelonner ; le rem dimensionne la typographie, les espacements et la mise en page, de sorte qu'un seul changement à la racine redimensionne une interface entière ; l'em dimensionne ce qui doit suivre son propre texte, comme le remplissage d'un bouton ; le vw dimensionne les titres et les bandeaux qui doivent remplir l'écran sur n'importe quel appareil. Convertir entre eux, c'est l'arithmétique quotidienne qui transforme une maquette livrée en pixels en une feuille de style qui s'adapte.
Questions fréquentes
Pourquoi 16 px comme point de départ habituel ?
Parce que c'est la taille de texte par défaut dans tous les grands navigateurs, et qu'une feuille de style qui ne la redéfinit pas en hérite. Un rem vaut donc 16 px au réglage par défaut : de là viennent les conversions familières, 0,5 rem pour 8 px, 1,5 rem pour 24 px. Si un utilisateur a agrandi la valeur par défaut dans ses réglages, ces mêmes valeurs en rem grandissent avec elle — ce qui est précisément l'intérêt de les employer.
Faut-il employer rem ou em ?
Rem pour tout ce qui doit suivre la page entière — échelle typographique, espacements, largeurs de mise en page —, car il se mesure depuis la racine et ne s'accumule jamais. Em pour tout ce qui doit suivre le texte où il se trouve : le remplissage d'un bouton, l'écart auprès d'une icône, le retrait d'une citation. L'erreur courante est d'imbriquer des éléments dimensionnés en em : 1,2 em dans 1,2 em devient 1,44, puis 1,73, jusqu'à ce que le texte du bas de page fasse le double de la taille voulue.
Le résultat est-il exact ?
Là où les deux unités se définissent l'une par l'autre en nombres entiers, oui — la page le dit au-dessus du chiffre, et le seul arrondi porte sur le nombre de décimales affichées. Là où le rapport n'a pas de décimale finie, la page affiche douze chiffres significatifs et qualifie la relation d'approchée plutôt que de prétendre le contraire.
Ce que je saisis quitte-t-il mon appareil ?
Non. Le calcul se fait dans votre navigateur ; rien n'est envoyé, et il n'y a d'ailleurs aucun serveur pour le recevoir. Une fois la page chargée, elle fonctionne réseau coupé.
Pourquoi vous avez besoin de convertir des rem en px
Vous ouvrez une feuille de style et voyez padding: 2.25rem sur une carte et font-size: 0.8125rem sur une légende. Ce sont de bonnes valeurs, écrites comme le CSS moderne devrait l'être, et elles ne disent rien au premier coup d'œil. Quelle est la taille de cette marge intérieure de carte à l'écran ? La légende sera-t-elle lisible ? Correspond-elle aux 36 px et 13 px du fichier de maquette qu'on vous a remis ? Pour répondre, vous convertissez des rem en px : vous multipliez par la taille de police de la racine et lisez la réponse dans l'unité qu'emploient les outils de conception. C'est l'inverse du sens habituel, et c'est ce que vous faites quand vous lisez du code, vérifiez une maquette par rapport à une version construite ou expliquez une mise en page à quelqu'un qui pense en pixels.
La conversion est facile ; ce qui vaut une page, c'est la base. Un rem n'est pas une taille, c'est un multiple d'une taille, la taille de police de l'élément racine. Dans un navigateur à qui personne n'a dit le contraire, cette taille est de 16 px ; 1 rem fait donc 16 px, 2,25 rem font 36 px et 0,8125 rem font 13 px. Mais la racine peut être modifiée par la feuille de style, et le lecteur peut la modifier dans le navigateur, et alors toutes les valeurs en rem de la page bougent avec elle. La page demande donc la base et l'utilise, au lieu de la cacher.
Le calcul se fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas la formule, un tableau de valeurs courantes, ce que la conversion conserve et ne peut pas conserver, les situations où les développeurs ont besoin de convertir des rem en px, et quelques habitudes qui gardent une feuille de style en rem facile à lire.
La formule et la base
px égale rem multiplié par la base
La formule est une multiplication : px = rem × base. Avec la base habituelle de 16 px, 1,5 rem devient 24 px, 0,75 rem devient 12 px et 4 rem devient 64 px. La page imprime la base à côté du résultat ; une ligne comme 1,5 rem = 24 px (16 px) indique donc ce qu'elle a supposé et vous voyez tout de suite si cela correspond à votre projet.
Trouver votre base
Cherchez dans la feuille de style une règle sur html ou :root qui fixe font-size. S'il n'y en a pas, la base est la valeur par défaut du navigateur, 16 px. S'il y en a une, comme 62.5%, prenez ce pourcentage de 16 : 62,5 % donne 10 px. Dans les outils de développement du navigateur, vous pouvez aussi sélectionner l'élément racine et lire sa taille de police calculée, qui est le nombre à saisir dans le champ de base.
Quand la taille de la racine est fluide
Certains sites font grandir la taille de la racine avec la fenêtre, à l'aide d'une expression clamp. Alors 1 rem n'a plus aucune valeur unique en pixels : il fait 15 px sur un téléphone et 18 px sur un grand moniteur. Dans ce cas, toute conversion est un instantané. Saisissez la base que vous voyez à la largeur qui vous intéresse, et comprenez que la réponse n'est valable qu'à cette largeur.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la proportion
Un rem est ce que vaut la taille de police de la racine ; une mise en page écrite en rem garde donc sa forme quand cette taille change. Quand vous convertissez des rem en px, la valeur en pixels est cette même proportion rendue concrète pour une base particulière. Le rapport entre deux tailles, par exemple un titre de 2 rem sur un corps de texte de 1 rem, ne change pas, quelle que soit la façon dont vous convertissez, et ce rapport est ce dont dépend une bonne mise en page.
Elle ne peut pas connaître les réglages de votre lecteur
Le nombre dépend entièrement de la base. Si le lecteur a augmenté la taille de texte par défaut de son navigateur, ce que beaucoup de gens font et ont le droit de faire, alors 1 rem ne vaut pas 16 px pour lui, et le chiffre que vous voyez n'est juste que pour la base du champ. Traitez la valeur en pixels comme un moyen de comprendre la conception, non comme une promesse de ce que chaque visiteur verra.
Arrondi
Comme la base est généralement un nombre entier, le résultat de la multiplication est généralement exact. 0,8125 rem font exactement 13 px à une base de 16 ; 0,6875 rem font exactement 11 px. Si vous obtenez une longue décimale, c'est le signe que la valeur en rem a été calculée à partir d'une autre base que celle que vous avez saisie.
Valeurs courantes
Le tableau en bas de la page
La page comprend un tableau des valeurs en pixels auxquelles correspondent des chiffres courants en rem à la base que vous avez réglée : 0,5 rem font 8 px, 0,625 font 10, 0,75 font 12, 0,875 font 14, 1 fait 16, 1,125 font 18, 1,25 font 20, 1,5 font 24, 2 font 32, 3 font 48 et 4 font 64. Ce sont les valeurs qui reviennent le plus souvent dans les échelles d'espacement et de texte, et les connaître par cœur rend une feuille de style lisible d'un coup d'œil.
Lire une feuille de style en pixels
Un exercice utile consiste à prendre une feuille de style que vous n'avez pas écrite et à traduire une fois ses principales valeurs en pixels, en notant les résultats. Une taille de corps de 1 rem, des titres de 1,5 et 2,25 rem, un écart de conteneur de 2 rem : en pixels, 16, 24, 36 et 32. Vue ainsi, la logique de la conception apparaît, et vous pouvez la comparer au fichier de maquette sans calculatrice.
Comment convertir des rem en px ici
Saisissez la valeur en rem
Entrez la taille en rem dans le premier champ. Les décimales sont acceptées ; 0,8125 marche donc aussi bien que 1.
Réglez la base
Laissez-la à 16 si votre CSS ne modifie pas la taille de la racine. Changez-la s'il la modifie. Le résultat se met à jour au fil de la saisie.
Lisez la valeur en pixels
La réponse apparaît aussitôt, avec la base affichée à côté, pour que vous sachiez ce qui a été supposé. Copiez-la dans vos notes ou comparez-la au fichier de maquette.
D'où viennent ces unités
Le pixel CSS
Quand les écrans ont cessé d'avoir une densité prévisible, une page mesurée en vrais pixels est devenue une page qui rétrécissait à mesure que les écrans devenaient plus nets. Le pixel CSS a donc été redéfini comme une longueur de référence : environ 1/96 de pouce vue à une distance de lecture confortable. Un pixel dans une feuille de style n'est donc pas un point de votre écran mais une unité de longueur que le navigateur fait correspondre à autant de points que l'écran en demande.
Le rem
L'em est plus ancien que le web : dans le plomb typographique, c'était la largeur d'un bloc fondu, nommée d'après la capitale M, et en CSS il désigne la taille de police en vigueur, ce qui explique qu'il change quand on imbrique des éléments. Le rem a été ajouté pour échapper précisément à cela : c'est l'em de l'élément racine, et il ne se cumule jamais. Pour voir la différence en chiffres, convertissez des px en em et comparez avec ce que vous obtenez quand vous convertissez des rem en px.
Quand les développeurs convertissent des rem en px
Vérifier une version construite par rapport à un fichier de maquette
Une graphiste remet un fichier en pixels ; le développeur a écrit le code en rem. Pour vérifier que la page correspond, il convertit des rem en px et compare les nombres. Un écart saute aux yeux : 1,375 rem font 22 px, et si la maquette dit 24, l'un des deux a tort.
Lire du code que l'on ne connaît pas
Quand vous héritez d'une feuille de style, les valeurs en rem cachent les vraies tailles. En convertir une poignée parmi les principales vous donne une carte de la conception : la taille du texte, la largeur des gouttières, l'emplacement des points de rupture.
Rédiger des rapports de bogues et de la documentation
Ceux qui testent une page décrivent ce qu'ils voient en pixels. Un développeur qui dit que la marge intérieure est de 2,5 rem dit peu de chose à un testeur ; 40 px, cela veut dire quelque chose. Convertir permet aux deux côtés de se comprendre.
Fixer des valeurs qui doivent être exactes en pixels
Certaines choses doivent être un nombre exact de pixels d'appareil, sinon elles paraissent floues : une bordure d'un pixel, une icône dessinée sur une grille de 24 px. Si une taille doit tomber sur la grille de pixels, convertir des rem en px vous dit si c'est le cas à votre base.
Pièges quand vous convertissez des rem en px
Oublier une taille de racine modifiée
Si la racine est réglée à 62.5% ou à une expression clamp, le facteur standard de 16 ne s'applique pas. Le résultat est faux du rapport des deux bases. Vérifiez toujours d'abord la base.
Confondre le rem et l'em
L'em est relatif à la taille de police propre de l'élément, non à la racine. Une valeur de 1.5em dans un titre de 24 px fait 36 px, mais dans un paragraphe de 16 px elle fait 24 px. Cette page convertit le rem, qui n'a pas une telle ambiguïté. Pour l'em, voir Convertir em en px.
Supposer que l'écran affiche les mêmes pixels
Un pixel CSS n'est pas un pixel d'appareil. Sur un écran à haute densité, un pixel CSS peut correspondre à deux ou trois pixels d'appareil. La conversion donne des pixels CSS, ce qu'emploient à la fois les outils de conception et la feuille de style.
Arrondir trop tôt
Si vous arrondissez 13,333 px à 13 puis reconvertissez, vous obtenez 0,8125 rem et non les 0,8333 de départ. Gardez la valeur d'origine en rem quand cela compte.
Questions que l'on se pose avant de convertir
Combien de pixels font 1 rem ?
Seize, dans un navigateur dont la valeur par défaut n'a pas été modifiée.
Combien de pixels font 2 rem ?
Trente-deux à la base par défaut. À une base de 10, ce serait 20.
Pourquoi mon navigateur affiche-t-il autre chose ?
Le réglage du lecteur ou une règle de la feuille de style a modifié la taille de la racine. Regardez la taille de police calculée de l'élément racine dans les outils de développement.
Le rem est-il identique à l'em ?
Non. Le rem se réfère à l'élément racine et l'em à l'élément lui-même.
Mon nombre est-il envoyé ?
Non. L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé nulle part.
Comment revenir en arrière ?
Avec Convertir px en rem, qui divise au lieu de multiplier.
Habitudes qui rendent une feuille de style en rem facile à lire
Écrivez la valeur en pixels dans un commentaire
Une ligne comme gap: 1.5rem; /* 24px */ coûte quelques caractères et épargne une conversion au lecteur suivant. Elle consigne aussi la base que vous avez supposée.
Utilisez une petite échelle
Un projet qui n'emploie qu'une poignée de valeurs en rem, comme 0,5, 1, 1,5, 2 et 3, est facile à apprendre : après une journée, vous les connaissez en pixels sans réfléchir. Quand vous convertissez des rem en px pour une telle feuille de style, vous ne faites que confirmer ce dont vous vous souvenez.
Nommez vos valeurs
Avec des propriétés personnalisées, comme --space-md: 1.5rem, la feuille de style décrit l'intention au lieu de nombres. Le nom porte le sens, et le nombre se trouve en un seul endroit.
Testez avec une autre taille par défaut
Augmentez la taille de texte par défaut dans votre navigateur et regardez la page. Si elle tient, la mise en page est vraiment construite en rem. Si elle casse, quelque chose est resté en pixels.
Bien utiliser la valeur en pixels après avoir converti des rem en px
Comparez les rapports, pas seulement les nombres
Quand vous convertissez des rem en px pour toute une feuille de style, regardez les rapports entre les tailles autant que les tailles elles-mêmes. Une échelle de texte où chaque palier vaut environ 1,25 fois le précédent donne 16, 20, 25, 31 et 39 pixels ; une échelle de 1,5 donne 16, 24, 36 et 54. Repérer le rapport vous dit ce que la graphiste avait en tête, et vous permet d'étendre l'échelle de manière cohérente quand vous avez besoin d'une nouvelle taille.
Traduisez pour ceux qui pensent en pixels
Tout le monde dans une équipe ne lit pas le rem. Chefs de projet, rédacteurs et clients travaillent souvent à partir de captures d'écran et demandent qu'un titre soit un peu plus grand. Si vous pouvez dire que le titre fait 36 px maintenant et ferait 40 px à 2,5 rem, la conversation est courte. La page est utile comme passerelle rapide entre les deux vocabulaires.
Vérifiez les cibles tactiles et les tailles minimales
Les directives pour écrans tactiles demandent des cibles d'au moins 44 px environ, et celles pour le texte demandent un corps de texte d'environ 16 px ou plus. Les deux sont énoncées en pixels. Pour vérifier une feuille de style écrite en rem par rapport à elles, convertissez des rem en px et voyez si les boutons et le texte passent la barre.
Pensez au cas du zoom
La valeur obtenue vaut pour la base que vous avez saisie. Si vos lecteurs peuvent agrandir le texte, refaites la conversion avec une base de 20 ou 24 et voyez ce que la mise en page demande à l'écran. Une carte confortable à 16 peut déborder à 24, et le meilleur moment pour le découvrir est avant la publication de la page.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir au rem, utilisez Convertir px en rem. Pour les tailles relatives à l'élément, il y a Convertir px en em et Convertir em en px, et pour les tailles relatives à l'écran, Convertir px en vw et Convertir vw en px. Pour les couleurs de la même feuille de style, Convertir HEX en RGB et Convertir HSL en HEX sont à portée de main, et pour les noms de classes, Convertir le texte en kebab-case transforme une expression en un nom que le CSS accepte.
Un exemple détaillé
Supposons que vous examiniez une demande de fusion et que la feuille de style ait une section principale avec padding: 5rem 1.5rem, un titre de 3.5rem et un paragraphe d'introduction de 1.25rem. Le fichier de maquette dit 80 px et 24 px de marge intérieure, un titre de 56 px et une introduction de 20 px. Vous saisissez 5 et lisez 80 px, saisissez 1,5 et lisez 24, saisissez 3,5 et lisez 56, saisissez 1,25 et lisez 20. Les quatre correspondent, la version construite est donc fidèle. Si le titre avait été de 3,25 rem, vous auriez lu 52 et repéré l'écart avant qu'il n'atteigne la graphiste.
Une courte liste de contrôle
Avant de convertir
Trouvez la base : la règle de la racine dans la feuille de style, ou la taille calculée dans les outils de développement.
Pendant la conversion
Saisissez la valeur en rem, vérifiez la base affichée à côté du résultat et notez le chiffre en pixels.
Après la conversion
Comparez avec le fichier de maquette. Si les nombres diffèrent, vérifiez la base avant de soupçonner le code.
Erreurs courantes
Utiliser 16 sans vérifier
C'est la valeur par défaut, pas une règle. Vérifiez la racine.
Traiter les pixels comme définitifs
La réponse vaut pour une base. Un lecteur dont la valeur par défaut est plus grande voit de plus grands pixels.
Confondre rem et em
Ils se ressemblent et se comportent différemment. Utilisez la bonne page pour chacun.
Vos nombres restent sur votre appareil
Le calcul se fait en local. Vos valeurs sont utilisées par votre propre navigateur et rien n'est envoyé nulle part. Il n'y a rien à supprimer ensuite et aucun compte à créer. C'est la manière simple de convertir des rem en px.
Résumé
Pour convertir des rem en px ici, saisissez la taille en rem et lisez-la aussitôt en pixels, d'après la formule px = rem × base. La base commence à 16 px, la valeur par défaut d'un navigateur, et vous pouvez la modifier pour qu'elle corresponde à votre CSS. La conversion conserve la proportion, puisqu'un rem est ce que vaut la taille de police de la racine, et elle ne peut pas connaître les réglages de votre lecteur ; le chiffre n'est donc juste que pour la base du champ. Le tableau des valeurs courantes, de 0,5 rem à 8 px jusqu'à 4 rem à 64 px, vous aide à lire une feuille de style d'un coup d'œil. Rien n'est envoyé.