Convertir px en rem Pixels ↔ Root em Gratuit En ligne Sûr
Saisissez une valeur en px et lisez-la aussitôt en rem. 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 px en rem
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
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 les graphistes et les développeurs convertissent des px en rem
Les outils de conception parlent en pixels. Une maquette dit que le titre fait 32 px, que l'écart entre les sections est de 48 px, que le bouton a 16 px de marge intérieure. Les feuilles de style, bien écrites, parlent en rem. L'écart entre ces deux langages, c'est là que se trouve cette page : vous saisissez une taille en pixels et vous la lisez en rem, pour que le nombre que vous mettez dans le CSS signifie ce que le graphiste voulait dire. Convertir des px en rem est un petit geste, mais on le fait des centaines de fois dans la vie d'un site, et une mauvaise base transforme une mise en page soignée en une mise en page légèrement fausse partout à la fois.
La raison de se soucier du rem est l'accessibilité et la souplesse. Un rem est un multiple de la taille de police de la racine, que le navigateur fixe à 16 px sauf instruction contraire, et que le lecteur est libre de modifier dans ses réglages. Une mise en page écrite en rem garde donc sa forme quand une personne à la vue faible augmente la taille de texte par défaut : texte, espacements et boîtes grandissent ensemble. Une mise en page écrite en pixels ne suit pas, et le lecteur qui a demandé un texte plus grand obtient des lettres plus grandes dans des boîtes à l'étroit, ou rien du tout. C'est pourquoi presque tous les guides de style modernes disent la même chose : utilisez le rem pour le texte et l'espacement.
Cette page fait l'arithmétique dans votre navigateur. Rien n'est envoyé, et ce dont dépend la conversion, la taille de base, est écrit ci-dessous dans un champ que vous pouvez modifier, au lieu d'être supposé dans votre dos. Vous trouverez plus bas la formule, le tableau des tailles courantes, les raisons pour lesquelles la base compte, les pièges qui attrapent ceux qui convertissent des px en rem à la hâte et un bref guide pour utiliser le résultat dans de vraies feuilles de style.
La formule et la base
rem égale px divisé par la base
La formule est une division : rem = px ÷ base. Avec la base habituelle de 16 px, une taille de 24 px devient 1,5 rem, 32 px devient 2 rem et 8 px devient 0,5 rem. La page affiche le résultat au fil de la saisie, et elle affiche la base utilisée ; la ligne 24 px = 1,5 rem (16 px) vous dit donc exactement ce qui a été supposé.
D'où vient le 16
La base commence à 16 px parce que c'est ce que le navigateur utilise quand personne ne dit le contraire. Ce n'est pas une loi du web ; c'est la valeur par défaut de la valeur par défaut, et elle est stable depuis des décennies. Si votre CSS ne touche jamais à la taille de police de la racine, 1 rem vaut 16 px pour la plupart des visiteurs. S'il y touche, la base est ce que vous avez fixé.
L'astuce des 62,5 % et pourquoi on l'utilise
Certaines feuilles de style fixent la taille de la racine à 62,5 %, ce qui fait que 1 rem égale 10 px dans un navigateur par défaut ; 24 px valent alors simplement 2,4 rem et l'arithmétique se fait facilement de tête. Cela marche, mais a un coût : toute la page dépend désormais de ce pourcentage, et tout composant qui attend 16 comme base sortira trop petit. Si votre projet fait cela, saisissez 10 dans le champ de base de cette page, et tous les chiffres correspondront à votre CSS.
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. C'est toute la raison de l'écrire ainsi. Quand vous convertissez des px en rem, le nombre obtenu est la même proportion que celle de la valeur en pixels à la base choisie, exprimée désormais d'une manière qui s'adapte.
Elle ne peut pas connaître les réglages de votre lecteur
Le nombre dépend entièrement de la base. Si votre CSS fixe une autre taille sur l'élément racine, ou si le lecteur a modifié la taille de texte par défaut dans son navigateur, ce que beaucoup de gens font et ont le droit de faire, alors 1 rem ne vaut pas 16 px pour lui. Le chiffre affiché n'est juste que pour la base du champ. Ce n'est pas un défaut de l'outil mais la nature de l'unité : elle est relative, et une unité relative n'a pas de valeur fixe vers laquelle convertir.
Arrondi
La division par 16 donne des résultats ronds pour beaucoup de tailles courantes (16, 24, 32, 48, 64) et des décimales périodiques pour d'autres (10 px font 0,625 rem ; 13 px font 0,8125). La page donne autant de chiffres que le nombre en demande, et vous décidez combien en garder dans la feuille de style. Les navigateurs gèrent sans problème de longues décimales, mais une valeur arrondie comme 0,8125rem est plus facile à lire et à entretenir qu'une valeur à dix chiffres.
Tailles courantes
Le tableau en bas de la page
Sous le convertisseur, vous trouvez un tableau de tailles courantes : 8 px font 0,5 rem, 10 px font 0,625, 12 px font 0,75, 14 px font 0,875, 16 px font 1, 18 px font 1,125, 20 px font 1,25, 24 px font 1,5, 32 px font 2, 48 px font 3 et 64 px font 4. Ce sont les tailles qui reviennent le plus souvent dans les échelles typographiques et les systèmes d'espacement, et les avoir sous les yeux évite une conversion.
Une échelle bâtie sur le rem
Une bonne habitude consiste à choisir un petit ensemble de valeurs en rem et à les réutiliser : 0,5, 1, 1,5, 2, 3 et 4 pour l'espacement, et 0,875, 1, 1,25, 1,5, 2 pour le texte. Les graphistes appellent cela une échelle, et elle garde un site visuellement cohérent. Quand une maquette vous donne une valeur bizarre comme 22 px, utilisez le convertisseur pour voir que cela fait 1,375 rem, puis décidez si vous arrondissez à la valeur la plus proche de votre échelle.
Comment convertir des px en rem ici
Saisissez la valeur en pixels
Entrez la taille en pixels dans le premier champ. Les décimales sont acceptées ; 13,5 px marche donc aussi bien que 14.
Vérifiez 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.
Copiez la valeur en rem
Lisez le chiffre et utilisez-le dans votre CSS, avec l'unité écrite derrière : font-size: 1.5rem. N'oubliez pas l'unité, car un nombre seul signifie autre chose pour la plupart des propriétés.
D'où viennent ces unités
Le pixel CSS n'est pas le pixel de votre écran
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. Tout le reste de cette page repose là-dessus. 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.
Pourquoi le rem existe
Avant le rem, les développeurs dimensionnaient tout en em ou en pourcentages, et les éléments imbriqués se multipliaient les uns les autres : une liste dans une liste dans une liste rétrécissait ou grandissait à chaque niveau. Le rem leur a donné une seule référence fixe, la racine, et a supprimé le cumul. Si vous voulez comparer les deux, Convertir px en em et voyez comment la même valeur en pixels dépend de l'élément où elle se trouve.
Où vous rencontrez le rem en pratique
Texte
Le corps du texte fait couramment 1 rem, les titres de 1,25 à 3 rem, les mentions en petits caractères de 0,75 à 0,875 rem. Écrits en rem, ils permettent à un lecteur d'agrandir toute la page en changeant un seul réglage du navigateur.
Espacement et mise en page
Marges, marges intérieures et écarts en rem gardent le blanc proportionnel au texte. Quand le texte grandit, l'espace autour grandit aussi, et la mise en page reste équilibrée au lieu d'entasser de plus grandes lettres dans les anciennes boîtes.
Requêtes média
Les points de rupture écrits en em ou en rem réagissent à la taille de texte du lecteur ; la mise en page passe donc plus tôt à sa forme étroite pour quelqu'un qui a agrandi son texte. C'est un raffinement qu'il faut connaître, même si les pixels restent courants pour les points de rupture.
Ce qu'il faut laisser en pixels
Les bordures très fines, les ombres et les icônes minces rendent souvent mieux à des tailles fixes en pixels, car une bordure de 0.0625rem qui passe à 0.1rem avec un grand texte ne sert à personne. Utilisez le rem pour ce qui doit s'adapter et les pixels pour ce qui ne le doit pas.
Pièges quand vous convertissez des px en rem
Oublier que la base n'est pas toujours 16
Si un projet fixe html { font-size: 62.5% } ou utilise une taille de racine fluide, le facteur est différent. Vérifiez la feuille de style avant de faire confiance à un nombre issu de n'importe quel convertisseur, celui-ci compris.
Convertir la taille de la racine elle-même
Si vous fixez la taille de la racine en pixels, le réglage du navigateur du lecteur est écrasé et l'avantage du rem est perdu. Fixez la racine en pourcentage, ou laissez-la tranquille, afin que la préférence de l'utilisateur soit respectée.
Utiliser le rem dans un composant qui fixe sa propre taille de police
Le rem se réfère toujours à la racine, pas au composant. Un bouton dont la taille de police est de 14 px et la marge intérieure de 1rem a une marge qui ne suit pas le texte propre du bouton. Si vous voulez un espacement qui suit le texte de l'élément, c'est le travail de l'em.
Mélanger les unités sans plan
Une feuille de style qui utilise des px pour une marge, des rem pour la suivante et des em pour une troisième est difficile à raisonner. Choisissez une règle : rem pour le texte et l'espacement, pixels pour les bordures et les ombres, et tenez-vous-y.
Questions que l'on se pose avant de convertir
Combien de rem font 16 px ?
Un, dans un navigateur par défaut. Seize divisé par la base de seize.
Le rem est-il meilleur que le px ?
Pour le texte et l'espacement, c'est le meilleur choix dans la plupart des projets, car il respecte les réglages du lecteur. Les pixels restent justes pour les choses qui ne doivent pas s'adapter.
Pourquoi mon résultat diffère-t-il de celui d'un autre site ?
Probablement une base différente. Vérifiez le champ : certains outils supposent 10, d'autres 16, d'autres 14. Cette page affiche la base à côté du résultat.
Dois-je arrondir ?
Non. Les navigateurs acceptent de longues décimales. N'arrondissez que pour la lisibilité.
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 rem en px, qui multiplie au lieu de diviser.
Bien choisir quand vous convertissez des px en rem
Décidez d'une base pour le projet et tenez-vous-y
Quoi que vous choisissiez, faites-en une décision et écrivez-la dans la documentation du projet. Une équipe en désaccord sur la base produit des composants qui ne vont pas ensemble.
Convertissez à l'étape de la conception, pas au dernier moment
Si vous convertissez des px en rem en lisant la maquette, vous intégrez l'échelle à la conception et vous remarquez tôt les valeurs bizarres. Si vous le faites à la fin, vous les découvrez sous la forme d'un tas de nombres incohérents.
Pensez aussi aux unités de fenêtre d'affichage
Pour les titres qui doivent remplir l'écran, Convertir px en vw exprime une taille en part de la fenêtre d'affichage. Elle s'adapte autrement que le rem, et les deux sont souvent combinés.
Habitudes qui facilitent la conversion des px en rem
Gardez une table de conversion en tête
Avec une base de 16, quelques repères couvrent l'essentiel du travail : 4 px font 0,25 rem, 8 px font 0,5, 12 px font 0,75, 16 px font 1, 24 px font 1,5 et 32 px font 2. Quand une maquette vous donne une valeur intermédiaire, vous pouvez estimer avant de convertir les px en rem sur la page, et n'utiliser le convertisseur que pour confirmer. Après quelques semaines, vous connaîtrez la table sans regarder.
Laissez le système de conception faire le travail
Si votre équipe tient des jetons de conception, comme spacing-2 ou font-lg, stockez-les une fois en rem et laissez tout le monde s'y référer par leur nom. Plus personne n'a alors besoin de convertir des px en rem, et un changement d'échelle se fait en un seul endroit. Le convertisseur est l'outil que vous utilisez quand vous écrivez les jetons, pas quand vous vous en servez.
Écrivez la valeur en pixels dans un commentaire
Une ligne comme padding: 1.25rem; /* 20px */ coûte quelques caractères et évite au développeur suivant de sortir une calculatrice. Elle consigne aussi la base que vous avez supposée, ce qui aide si la taille de la racine est modifiée plus tard.
Testez avec un réglage de navigateur modifié
La preuve qu'une page est construite en rem, c'est qu'elle survit à une taille de texte par défaut plus grande. Changez le réglage dans votre navigateur, rechargez et regardez. Les composants qui cassent sont ceux où quelque chose est resté en pixels ou où une hauteur fixe a coupé le texte.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir aux pixels, utilisez Convertir rem en px. 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. Si votre travail comprend des couleurs autant que des tailles, Convertir HEX en RGB, Convertir RGB en HEX et Convertir HEX en HSL s'occupent des notations de la feuille de style.
Un exemple détaillé
Supposons qu'une maquette donne un titre de carte à 28 px, une marge intérieure de carte de 20 px et un écart de 12 px entre les cartes, et que votre projet utilise la base par défaut de 16 px. Vous saisissez 28 et lisez 1,75 rem, saisissez 20 et lisez 1,25 rem, saisissez 12 et lisez 0,75 rem. Dans la feuille de style, vous écrivez font-size: 1.75rem, padding: 1.25rem et gap: 0.75rem. Un visiteur qui porte la taille de texte du navigateur à 20 px voit la même carte, agrandie d'un quart : le titre fait 35 px, la marge intérieure 25 px et l'écart 15 px, le tout en proportion. Si vous aviez écrit des pixels, le titre serait resté à 28 et la carte aurait eu l'air fausse.
Une courte liste de contrôle
Avant de convertir
Découvrez la base utilisée par votre CSS. Décidez quelles tailles doivent s'adapter et lesquelles non.
Pendant la conversion
Saisissez la valeur en pixels, vérifiez la base affichée à côté du résultat et copiez le chiffre en rem avec son unité.
Après la conversion
Testez la page avec une taille de texte par défaut plus grande dans le navigateur, et cherchez les boîtes qui ne contiennent plus leur texte.
Erreurs courantes
Supposer que 1 rem vaut toujours 16 px
Ce n'est vrai que si personne n'a modifié la taille de la racine, et certains lecteurs l'ont fait. Écrivez la mise en page de façon qu'elle fonctionne aussi à d'autres tailles.
Fixer la taille de la racine en pixels
Elle écrase le choix du lecteur. Utilisez un pourcentage, ou ne la fixez pas.
Tout convertir
Toutes les tailles ne doivent pas s'adapter. Laissez les bordures et les ombres en pixels.
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 px en rem.
Résumé
Pour convertir des px en rem ici, saisissez la taille en pixels et lisez-la aussitôt en rem, d'après la formule rem = px ÷ 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 : une mise en page écrite en rem garde sa forme quand la taille de police de la racine change. Elle ne peut pas connaître les réglages de votre lecteur ; le chiffre n'est donc juste que pour la base du champ. Les tailles courantes du tableau sous le convertisseur, de 8 px à 0,5 rem jusqu'à 64 px à 4 rem, vous évitent de refaire l'arithmétique. Rien n'est envoyé.