Convertir em en px Em ↔ Pixels Gratuit En ligne Sûr
Saisissez une valeur en em 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 em en px
| em | 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 on convertit des em en px
Une feuille de style dit margin-bottom: 0.75em sur un titre, padding: 0.4em 0.9em sur un bouton et line-height: 1.3em sur un bloc de texte. Ce sont de bonnes valeurs, souples, et elles sont presque impossibles à se représenter. Combien de pixels fait cette marge ? Le remplissage du bouton correspond-il aux 6 px et 14 px du fichier de maquette ? Pour le savoir, vous convertissez des em en px : vous multipliez par la taille de police à laquelle se rapporte l'em, et vous lisez la réponse dans l'unité qu'utilisent les outils de conception. C'est une question que se posent les développeurs quand ils relisent du code, vérifient une version par rapport à une maquette, déboguent un problème d'espacement ou transmettent un composant terminé à quelqu'un qui pense en pixels.
L'em est l'unité la plus délicate à convertir en CSS, car elle n'a pas de valeur fixe. Un em est la taille de police en vigueur là où la valeur est utilisée ou, pour la propriété font-size elle-même, celle du parent. Ainsi 1.5 em peut valoir 24 px à un endroit et 36 px à un autre, dans la même feuille de style, avec la même règle. Le convertisseur ne devine donc pas. Il demande la taille de police à laquelle l'em se rapporte, l'affiche à côté de la réponse et calcule avec elle. Si vous ne connaissez pas la taille, les sections ci-dessous expliquent comment la trouver dans votre navigateur.
Le calcul se fait dans votre navigateur et rien n'est envoyé. Vous trouverez plus bas la formule, comment trouver la bonne base, ce que la conversion conserve et ce qu'elle ne peut pas conserver, comment les valeurs em imbriquées se multiplient, quand les développeurs ont besoin de convertir des em en px et quelques habitudes qui gardent une feuille de style en em compréhensible.
La formule et la base
px égale em multiplié par la taille de police
La formule est une seule multiplication : px = em × base. Avec une base de 16 px, 1,5 em devient 24 px, 0,75 em devient 12 px et 2 em devient 32 px. La page imprime la base à côté du résultat, de sorte qu'une ligne comme 1,5 em = 24 px (16 px) dit exactement ce qui a été supposé. Si la taille de police de l'élément est de 20 px, saisissez 20, et 1,5 em devient 30 px.
Trouver la base dans votre navigateur
Ouvrez les outils de développement, sélectionnez l'élément et regardez sa taille de police calculée. C'est le nombre à saisir dans le champ de la base pour toute propriété autre que font-size. Pour font-size elle-même, sélectionnez plutôt le parent et lisez sa taille calculée. Cela prend quelques secondes et supprime entièrement la devinette.
Quand vous ne voyez pas la page
Si vous lisez du code sans la page, suivez la chaîne des tailles de police en remontant depuis l'élément : sa propre font-size s'il en a une, sinon celle de son parent, et ainsi de suite jusqu'à la racine, qui vaut 16 px à moins que la feuille de style ou le lecteur ne l'ait changée. Là où une taille est donnée en em, multipliez le long de la chaîne. C'est fastidieux, c'est pourquoi la plupart des équipes se fixent sur le rem pour les tailles de police.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la proportion par rapport au texte
Le résultat est la taille en pixels que représente l'em à la base que vous avez saisie. Écrits en em, un espace ou une taille suivent le texte auquel ils appartiennent, et la conversion montre ce que cela donne pour une taille de texte particulière.
Elle ne peut pas donner une seule réponse pour la page
C'est le point à surveiller : l'em est relatif à la taille de police de l'élément lui-même ou, pour font-size, de son parent, non de la racine. Les mêmes 1,5 em valent donc 24 px dans un élément de 16 px et 36 px dans un élément de 24 px, et em dans em se multiplie. Le chiffre sur la page est juste pour la base du champ et pour rien d'autre. Si vous voulez un nombre valable partout, c'est à cela que sert le rem. Pour comparer les deux, convertissez des rem en px et voyez comment une unité relative à la racine reste fixe.
Arrondis
Multiplier par une base entière donne des résultats exacts pour la plupart des valeurs. Si la base est décimale, par exemple 13,5 px, une valeur comme 1,2 em donne 16,2 px. Les navigateurs gèrent les pixels fractionnaires, mais quand il vous faut des pixels entiers, pour une bordure très fine ou une icône sur une grille, arrondissez délibérément et vérifiez l'effet.
Comment les valeurs em imbriquées se multiplient
Une liste dans une liste
Prenez une page dont le texte courant fait 16 px. Une liste a font-size: 0.875em, soit 14 px. Les éléments qu'elle contient ont aussi font-size: 0.875em, soit 14 × 0,875 = 12,25 px. Une liste dans un élément recommence : 10,7 px. À trois niveaux de profondeur, le texte est minuscule, et personne ne l'a décidé. Quand vous convertissez des em en px pour un composant et que la réponse paraît trop petite, l'imbrication est la première chose à vérifier.
Remonter la chaîne
Pour connaître la vraie taille en pixels d'em imbriqués, multipliez la base par chaque valeur en descendant : 16 × 0,875 × 0,875 = 12,25. Le convertisseur fait une étape à la fois. Pour une chaîne, convertissez la première valeur, prenez la réponse comme base de la deuxième et continuez. C'est la même arithmétique que celle du navigateur.
Comment empêcher l'effet cumulatif
Utilisez le rem pour les tailles de police, de sorte que chaque taille se rapporte à la racine, et gardez l'em pour les espacements, de sorte que les marges intérieures et extérieures suivent le texte de leur propre élément. Dans cette combinaison, rien ne se cumule, et les valeurs em que vous convertissez se rapportent toujours à une taille de police que vous pouvez lire aussitôt.
Valeurs courantes
Le tableau au bas de la page
La page comprend un tableau des valeurs en pixels auxquelles correspondent les chiffres em courants à la base que vous avez réglée : 0,5 em fait 8 px, 0,625 fait 10, 0,75 fait 12, 0,875 fait 14, 1 fait 16, 1,125 fait 18, 1,25 fait 20, 1,5 fait 24, 2 fait 32, 3 fait 48 et 4 fait 64. À la base par défaut, ce sont les mêmes nombres que pour le rem. Changez la base et le tableau change avec elle, ce qui est une bonne manière de voir ce que fait réellement l'em.
Essayer deux bases côte à côte
Saisissez 1,5 avec une base de 14, puis avec une base de 20. Vous obtenez 21 et 30 pixels. C'est toute la différence entre l'em et le rem en une expérience : le même chiffre, deux éléments, deux tailles.
Comment convertir des em en px ici
Saisissez la valeur en em
Entrez la taille en em dans le premier champ. Les décimales sont acceptées, donc 0.714 fonctionne aussi bien que 1.
Réglez la taille de police à laquelle l'em se rapporte
Saisissez la taille de police de l'élément, ou celle de son parent si la propriété est font-size. En cas de doute, laissez 16 et traitez le résultat comme une approximation.
Lisez la valeur en pixels
La réponse apparaît aussitôt, avec la base affichée à côté. Copiez-la dans vos notes ou comparez-la au fichier de maquette.
D'où viennent ces unités
L'em
L'em est plus ancien que le web. Dans le plomb typographique, c'était la largeur d'un bloc fondu, nommé d'après la majuscule M, et les typographes parlent encore de tirets cadratins et d'espaces cadratines. En CSS, il désigne la taille de police en vigueur, ce qui explique qu'il change quand on imbrique des éléments.
Le pixel et le rem
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 vu à une distance de lecture confortable. Le rem a été ajouté pour échapper à l'effet cumulatif de l'em : c'est l'em de l'élément racine, et il ne se multiplie jamais. Si vous travaillez avec les deux, convertissez des px en em pour aller dans l'autre sens.
Quand les développeurs convertissent des em en px
Vérifier une version par rapport à un fichier de maquette
Un graphiste remet un fichier en pixels, et le code est en em. Pour vérifier que la page correspond, vous convertissez des em en px avec la taille de police de chaque composant. Un bouton dont l'étiquette fait 14 px et dont le remplissage est de 0.714em 1.429em devrait donner 10 px et 20 px, et si la maquette dit 12 et 24, l'un des deux est faux.
Déboguer l'espacement
Quand un écart paraît trop grand ou trop petit, la cause est généralement une valeur em qui se rapporte à une police plus grande ou plus petite que celle que vous attendiez. La convertir avec la taille de police calculée de l'élément vous dit aussitôt si l'arithmétique est le problème.
Lire du code qu'on ne connaît pas
Les feuilles de style héritées sont pleines de valeurs em dont il faut reconstituer les tailles en pixels. En convertir une poignée parmi les principales, avec les bonnes bases, vous donne une carte du graphisme.
Rédiger de la documentation et des tests
Les personnes qui testent une page décrivent ce qu'elles voient en pixels. Un développeur qui dit que le remplissage est de 0.9em dit peu de chose à un testeur ; 12,6 px, cela signifie quelque chose. Convertir permet aux deux côtés de se comprendre.
Pièges quand on convertit des em en px
Utiliser la mauvaise base
L'erreur la plus courante. Pour font-size, utilisez la taille du parent ; pour toutes les autres propriétés, celle de l'élément lui-même. Vérifiez la propriété avant de saisir la base.
Oublier un parent en em
Si la taille du parent est elle-même en em, vous devez suivre la chaîne. Utilisez la valeur calculée des outils de développement pour raccourcir.
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 valoir deux ou trois pixels d'appareil. La conversion donne des pixels CSS, l'unité que partagent les outils de conception et la feuille de style.
Prendre la réponse pour une promesse
Si le lecteur agrandit le texte ou si le composant est réutilisé avec une autre taille de police, les pixels changent, comme ils doivent le faire. Le nombre converti décrit une situation, non toutes.
Questions que l'on se pose avant de convertir
Combien de pixels font 1 em ?
Autant que la taille de police en vigueur : 16 px pour un texte courant ordinaire à la valeur par défaut, 24 px dans un élément de 24 px.
Combien de pixels font 2 em ?
Le double de la taille de police en vigueur. À 16 px, cela fait 32 px.
Pourquoi mon navigateur affiche-t-il autre chose ?
La taille de police réelle de l'élément est différente de la base que vous avez saisie. Lisez la taille de police calculée dans les outils de développement.
L'em est-il la même chose que le rem ?
Non. L'em est relatif à l'élément, le rem à la racine.
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 em, qui divise au lieu de multiplier.
Habitudes qui gardent une feuille de style en em compréhensible
Commenter la base
Une ligne comme padding: 0.75em 1.25em; /* 12px 20px at 16px */ coûte quelques caractères et évite au lecteur suivant une conversion. Elle consigne la base que vous avez supposée.
Régler la taille de police une fois par composant
Définissez la taille de police du composant sur son élément racine, et référez-vous-y en em à l'intérieur. La base est alors la même pour chaque valeur du composant, et vous pouvez convertir des em en px par rapport à elle en toute confiance.
L'em pour les espacements, le rem pour le texte
C'est la répartition sur laquelle se fixent la plupart des feuilles de style, et elle garde l'arithmétique simple. Pour des tailles relatives à l'écran, Convertir px en vw et Convertir vw en px sont les outils.
Tester avec une autre taille de texte
Augmentez la taille de texte par défaut de votre navigateur et regardez la page. Si les espacements suivent le texte, les valeurs em fonctionnent. Sinon, quelque chose est resté en pixels.
Une méthode pour les cas délicats
Travailler de l'extérieur vers l'intérieur
Quand un composant est profondément imbriqué dans d'autres et que ses valeurs em paraissent confuses, partez de l'élément le plus extérieur dont vous connaissez la taille et avancez vers l'intérieur, en convertissant un niveau à la fois. Notez chaque taille en pixels au fur et à mesure. Après deux ou trois niveaux, toute la chaîne est sur le papier, et vous voyez exactement d'où vient un nombre surprenant. Cela prend une minute et remplace une heure de tâtonnements.
Décider s'il faut simplifier
Si vous devez convertir des em en px à travers quatre niveaux pour comprendre une mise en page, la feuille de style vous dit quelque chose. Pensez à passer les tailles de police en rem, pour que chacune se rapporte à la racine, et à ne laisser que les espacements en em. La page aura le même aspect et sera bien plus facile à lire l'an prochain.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir à l'em, utilisez Convertir px en em. Pour les tailles relatives à la racine, il y a Convertir px en rem et Convertir rem 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 RGB en HEX s'occupent des notations.
Un exemple détaillé
Supposons que vous relisiez un composant de bouton. L'étiquette fait 14 px, le CSS dit padding: 0.714em 1.429em et un écart de 0.5em entre une icône et l'étiquette. Vous saisissez 14 comme base, puis 0.714 et lisez 10 px, 1.429 et lisez 20 px, 0.5 et lisez 7 px. La maquette dit 10, 20 et 8. Deux sur trois correspondent ; vous regardez donc l'écart : 8 px à une base de 14 serait 0.571 em, et quelqu'un l'a arrondi à 0.5. Vous le signalez lors de la relecture, et la correction tient en un seul nombre.
Une courte liste de contrôle
Avant de convertir
Trouvez la taille de police à laquelle l'em se rapporte, grâce aux outils de développement ou à la chaîne des tailles de police dans le code.
Pendant la conversion
Saisissez la valeur en em, réglez la base et lisez les pixels, en notant la base affichée à côté du résultat.
Après la conversion
Comparez avec la maquette. Si les nombres diffèrent, vérifiez la base avant de soupçonner le code.
Erreurs courantes
Utiliser 16 sans vérifier
Ce n'est juste que lorsque la taille de police de l'élément est de 16 px.
Confondre l'em et le rem
Ils se ressemblent et se comportent différemment. Utilisez la bonne page pour chacun.
Oublier que l'em se cumule
Une valeur dans un élément imbriqué est relative à une taille que vous n'avez peut-être pas vue. Suivez la chaîne.
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 em en px.
Résumé
Pour convertir des em en px ici, saisissez la taille en em et la taille de police à laquelle elle se rapporte, et lisez aussitôt le résultat en pixels, avec la formule px = em × base. La conversion conserve la proportion par rapport à la taille de police en vigueur là où la valeur est utilisée. Elle ne peut pas donner une seule réponse pour une page : l'em est relatif à l'élément lui-même ou, pour font-size, au parent ; les mêmes 1,5 em valent donc 24 px dans un élément de 16 px et 36 px dans un élément de 24 px, et em dans em se multiplie. Pour un nombre valable partout, utilisez le rem. Rien n'est envoyé.