La première fois qu'un concepteur m'a remis une spécification qui disait " ; corps texte 16px, rubriques 28px, petits caractères 13px" ; et le front-end lead disait " ; mais nous expédions tout en rem," ; j'ai fait la division à la main dans une application calculatrice Seize sur seize est un, vingt-huit sur seize est un point sept cinq, treize sur seize est zéro virgule huit un deux cinq. Ensuite, la taille de la police de base a changé à dix pixels pour un " ; 62,5 %" ; configuration sur un projet différent, et je l'ai tout refait. Après la troisième fois que j'ai construit un petit outil de style, j'ai presque enregistré, j'ai enregistré un petit convertisseur, j'ai presque.
tl;dr : Un convertisseur d'unité CSS transforme une valeur dans une unité - px, rem, em, pt ou % - en valeur équivalente dans une unité sur deux, en fonction de la taille de police racine que vous contrôlez (16 px par défaut).Pour convertir px en rem, divisez les pixels par la taille de la police racine :
24px ÷ 16 = 1.5rem. Pour aller dans l'autre sens, multipliez :1.5rem × 16 = 24px. le Convertisseur d'unités CSS le fait instantanément pour chaque unité à la fois, s'exécute entièrement dans votre navigateur et comprend une table de référence px-to-rem à partir de laquelle vous pouvez copier.
Ce guide couvre la façon dont les unités sont liées, pourquoi la taille de la police de base compte tellement, quand atteindre pour chaque unité et les mathématiques exactes que le convertisseur exécute. J'ai conçu de nombreuses interfaces sur les thèmes WordPress, l'interface utilisateur d'administration WP Adminify et les tableaux de bord React, et la question unitaire apparaît dans chacun d'eux. Les règles sont simples une fois que vous voyez le numéro unique auquel tout s'accroche.
Pourquoi la conversion px en rem est-elle importante ?
Les pixels sont l'unité que presque tous les outils de conception exportent Figma, Sketch et Photoshop pensent tous en pixels, donc une spécification de transfert est une liste de valeurs de pixels Les pixels sont également faciles à raisonner car un pixel CSS est une taille de référence fixe qui ne change pas lorsque l'utilisateur ajuste quoi que ce soit.
Cette fixité est exactement le problème pour les interfaces accessibles et réactives Quand quelqu'un augmente son navigateur' ; s taille de police par défaut - un paramètre sur lequel beaucoup de gens avec une basse vision s'appuient - le texte dimensionné en pixels fixes ignore complètement le texte dimensionné en échelles rem avec. Il en va de même du zoom du navigateur sur certaines configurations plus anciennes et des feuilles de style utilisateur Si vous voulez que votre typographie respecte les préférences reader' ; s, vous le taillez dans une unité relative, et rem est celui qui se comporte de manière prévisible sur toute une page.
Donc, le flux de travail commun est : conception en pixels, vaisseau en rem Cela vous laisse faire la division toute la journée, et la division est l'endroit où les petites erreurs s'insinuent Écrire 0.8125rem au lieu de 0.875rem pour une valeur 13 px est le genre de typo qui expédie à la production et fait qu'une étiquette semble subtilement faux Un convertisseur supprime ce risque, ce qui est toute la raison pour laquelle je garde un à portée de main Si vous travaillez sur beaucoup de ces tâches, le plus large Boîte à outils pour les développeurs Web couvre où la conversion d'unités s'adapte aux autres tâches quotidiennes.
Quelle est la différence entre px, rem, em, pt et % ?
Chacune de ces unités se résout en un certain nombre de pixels CSS au moment du rendu, une relation Valeurs et unités CSS Niveau 4 épingles vers le bas : le pixel de référence est défini par rapport à un écran de 96 dpi, et non par rapport à votre écran. La différence réside dans ce par rapport à quoi ils sont mesurés.
px est le pixel de référence CSS C'est une unité absolue dans le sens où elle ne dépend d'aucune taille de police. 1px est 1px. Cela le rend prévisible mais ne répond pas non plus aux préférences des utilisateurs.
rem signifie " ; root em." ; Un rem est égal à la taille de police de l'élément racine - le html élément. Par défaut, cela fait 16 px, donc 1rem est 16px, 1.5rem est 24px, et 0.5rem est 8px. Parce qu'elle est toujours liée à la racine, une valeur rem signifie la même chose partout dans le document, quelle que soit la profondeur d'imbrication de l'élément.
em est relatif à la taille de police du actuel élément. Si un élément' ; s taille de la police est 20 px, alors 1em à l’intérieur, c’est 20px, 1.5em est 30 px, et ainsi de suite Le hic est que em compose : si un parent se met font-size: 1.2em et un enfant aussi se met 1.2em, la taille effective de child' ;s est de 1,2.1.2 du grand-parent Cet outil suppose un élément dimensionné à la base, donc em et rem lisent la même - et vous modélisez un contexte em spécifique en définissant la taille de la police de base sur cet élément' ; taille.
pt est le point, hérité de la typographie d'impression. CSS définit un pouce comme 96 pixels et 72 points, donc 1pt est égal à 96/72 ≈ 1,333px, et 1px est égal à 0,75 pt. Les points appartiennent aux feuilles de style imprimées ; à l'écran, ils ne sont qu'un multiple fixe du pixel de référence.
% pour la taille de la police, il y a un pourcentage du parent (ou, à la racine, de la base). 100% égale la taille de référence et 50% égale la moitié de celui-ci À une base de 16 px, 100% est 16px et 150% est 24px.
Voici comment les valeurs communes s'alignent à la racine 16 px par défaut :
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10.5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112,5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
le Convertisseur d'unités CSS génère toute cette table pour n'importe quelle base que vous définissez, afin que vous puissiez observer une échelle de types entière à la fois.
Comment la taille de la police de base change-t-elle tout ?
La taille de la police de base (racine) est le pivot pour chaque unité relative Changez-la et chaque rem, em et % de conversion change avec elle, tandis que px et pt restent en place.
La valeur par défaut du navigateur est 16 px, c'est pourquoi 1rem est normalement 16px. Mais vous pouvez définir la racine sur n'importe quoi Un modèle populaire définit html { font-size: 62.5%; }(, ce qui fait que la racine est 10 px (62,5 % de 16). Maintenant 1rem est propre 10px& Rem Math devient " ; déplacer la virgule décimale" ; : 1.6rem vaut 16px, 2.4rem vaut 24px, 0.8rem vaut 8px. Les équipes adoptent cela pour que les nombres de leurs feuilles de style lisent presque comme des pixels tout en continuant à évoluer avec les préférences de l'utilisateur.
Pour modéliser cela dans le convertisseur, définissez la taille de la police de base sur 10 et lisez la colonne rem. Une valeur de 24 px s'affiche désormais comme 2.4rem au lieu de 1.5rem. C'est également ainsi que vous raisonnez sur em dans un composant qui définit sa propre taille de police : si une carte se définit font-size: 20px4, alors les valeurs em à l'intérieur sont relatives à 20, alors réglez la base sur 20 pour voir quoi 1.5em décide de.
L'erreur que je vois le plus souvent est d'oublier par quelle base une valeur a été calculée Quelqu'un convertit 24 px en 1.5 rem en supposant une racine de 16 px, puis la dépose dans un projet exécutant l'astuce de 62,5 % où la racine est 10 px - et 1.5 rem il y a 15 px, pas 24 px L'unité est relative, donc le nombre ne signifie quelque chose qu'une fois que vous connaissez la base Chaque fois que je colle une valeur rem entre les projets, je vérifie d'abord la taille de la police racine.
Comment convertissez-vous px en rem et rem en px à la main ?
Le calcul est une division et une multiplication.
px à rem : divisez la valeur du pixel par la taille de la police racine.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem à px : multipliez la valeur rem par la taille de la police racine.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px à em utilise la même formule que rem lorsque l'élément se situe à la taille de la police de base, donc 24px ÷ 16 = 1.5em. La différence est conceptuelle et non arithmétique : em est mesuré par rapport à l'élément actuel, donc si cet élément' ; sa taille diffère de la racine, vous utilisez sa taille comme base.
px à pt : multipliez par 0,75, car 1px = 0.75pt. aussi 16px × 0.75 = 12pt. En allant dans l'autre sens, pt × 1.333 = px.
px à % : divisez par la base et multipliez par 100. donc 24px ÷ 16 × 100 = 150%.
Rien de tout cela n'est difficile, mais le faire quarante fois en coiffant un composant est l'endroit où la fatigue produit des fautes de frappe. C'est précisément le genre de tâche répétitive et sujette aux erreurs Outils de productivité des développeurs la philosophie dit d'automatiser - décharger l'arithmétique pour que votre attention reste sur la conception.
Quand faut-il utiliser chaque unité ?
Il n’existe pas d’unité unique correcte ; il existe une unité adaptée à chaque travail.
Utilisez rem pour les tailles de police. C'est la recommandation la plus forte de la liste Rem évolue avec la préférence de taille de police du navigateur user' ; s, qui est une véritable victoire en matière d'accessibilité, et parce qu'elle est ancrée à la racine, elle ne se compose pas de manière inattendue. La plupart des équipes mesurent tout leur type en rem.
Utilisez rem ou px pour l'espacement, selon votre système. De nombreux systèmes de conception expriment la marge et le remplissage en rem de sorte que les échelles d'espacement avec le type D'autres maintiennent l'espacement en px pour des dispositions parfaites en pixels Les deux sont défendables ; choisissez-en un et soyez cohérent.
Utilisez em pour des choses qui devraient évoluer avec leur propre élément. Rembourrage sur un bouton qui devrait croître avec le bouton' ; s taille de la police est une utilisation classique d'em - définir le remplissage dans em et il suit le texte automatiquement Le dimensionnement de l'icône par rapport au texte adjacent en est un autre.
Utilisez px pour les bordures et les détails fins. un 1px border devrait généralement rester 1px; vous voulez rarement une racine des cheveux à l'échelle avec la taille de la police Les points d'arrêt des requêtes multimédias sont également souvent écrits en px, bien que certains préfèrent em là pour le comportement de zoom.
Utilisez pt uniquement dans les feuilles de style imprimées. Si vous stylisez quelque chose pour @media print, les points sont l'unité native d'impression et valent la peine d'être utilisés Sur écran, préférez px ou rem.
Utilisez % pour les largeurs de fluide et parfois les tailles de police. Le pourcentage est partout dans la disposition (width: 50%), et comme taille de police, il est parfois utilisé à la racine pour l'astuce de 62,5 %.
Quelles sont les erreurs courantes avec les unités CSS ?
Le premier est le problème de base-inadéquation déjà décrit : conversion contre la mauvaise taille de police racine Connaissez toujours votre racine avant de faire confiance à un numéro rem.
La seconde est des valeurs rem trop précises Certaines conversions ne divisent pas uniformément - 15 px à une base de 16 px est 0,9375 rem, et 13 px est 0,8125 rem Ces décimales longues sont exactes mais laides, et les arrondir trop fort (disons à 0,94 rem) décale la taille rendue d'une fraction de pixel Ma règle : garder trois ou quatre décimales pour rem, ou choisir des valeurs de base et de taille qui se divisent proprement Le convertisseur tourne judicieusement et coupe les zéros à la traîne ainsi 24px lit comme 1.5rem plutôt que 1.5000rem.
La troisième consiste à composer em. Les éléments de nidification qui définissent chacun une taille de police em multiplient l'effet, de sorte qu'un élément profondément imbriqué peut finir beaucoup plus grand ou plus petit que prévu. Si vous trouvez cela surprenant, cette composition est presque toujours la raison pour laquelle - passez ceux-ci à rem et la surprise disparaît.
La quatrième consiste à supposer que pt et px sont interchangeables. Ils ne le sont pas ; 12pt est 16px, pas 12px. Les mélanger dans une feuille de style qui s'étend sur l'écran et l'impression est un bug subtil.
Comment le convertisseur Toolz.dev gère-t-il les mathématiques ?
Sous le capot le convertisseur utilise une idée : exprimer chaque unité comme un nombre de pixels, puis convertir par pixels Chaque unité a un " ; pixels par unité" fixe ; étant donné la taille de police de base - px est 1, rem et em sont la base, pt est 96/72, et % est base/100 Pour convertir, il multiplie l'entrée par son unité' ; s pixels-par-unité pour obtenir une valeur de pixel, puis divise par l'unité cible' ; s pixels-par-unité Ce seul passage donne chaque unité à la fois, c'est pourquoi vous voyez px, rem, emt comme type de mise à jour et vous.
Il analyse également les valeurs avec les unités attachées, donc collant 24px remplit à la fois le numéro et l'unité pour vous Les résultats sont arrondis à quelques décimales et dépouillés des zéros de fin pour la lisibilité, et chacun a un bouton de copie d'un clic qui copie la valeur avec son suffixe d'unité prêt à coller dans CSS. Tout s'exécute côté client - rien que vous tapez n'est téléchargé - qui correspond à la approche axée sur la confidentialité derrière chaque outil du site.
Si vous choisissez également des couleurs ou construisez des ombres pour le même composant, le Générateur de gradient CSS et Générateur d'ombre de boîte vivez à un clic et plus largement convertisseur d'unité gère les unités physiques comme la longueur et le poids lorsque votre travail s'éternise en dehors du CSS.
Questions fréquentes
Comment convertir px en rem ?
Divisez la valeur du pixel par la taille de la police racine. Au navigateur par défaut de 16px, REM = px ÷ 16, donc 16px est 1rem, 24px est 1.5rem et 8px est 0.5rem. Entrez la valeur de pixel dans le convertisseur et l'équivalent REM apparaît instantanément à la taille de police de base que vous avez définie.
Comment convertir REM en PX ?
Multipliez la valeur REM par la taille de la police racine. À une base de 16 px, Px = REM × 16, donc 1rem est de 16 px, 1,5 rem est de 24 px et 0,75 rem est de 12 px. Modifiez la taille de police de base de l'outil si votre élément HTML utilise une valeur différente.
Quelle est la taille de police racine par défaut ?
Les navigateurs définissent l'élément html sur 16 px par défaut, c'est pourquoi ce convertisseur commence à 16. ? Parce que 1rem est toujours égal à la taille de la police racine, cette valeur par défaut rend 16 px égal à exactement 1rem. Les utilisateurs peuvent modifier leur navigateur' ; s la taille du texte par défaut, ce qui est l'une des raisons pour lesquelles rem est préféré pour une typographie accessible et évolutive.
Quelle est la différence entre REM et EM ?
Un rem est toujours relatif à la taille de la police html racine, il reste donc cohérent sur toute la page Un em est relatif à la taille de la police de l'élément actuel, il peut donc composer lorsque les éléments imbriqués définissent chacun leur propre taille Définissez la taille de la police de base dans l'outil pour modéliser un contexte em spécifique.
Comment PX et PT sont-ils liés dans le CSS ?
CSS définit un pouce comme 96 pixels et 72 points, donc 1 pt est égal à 96/72 ≈ 1,333 px, et 1 px est égal à 0,75 pt. Les points proviennent de la typographie d'impression ; à l'écran, ils sont un multiple fixe du pixel de référence CSS. Utilisez px ou rem pour le travail à l'écran et réservez pt pour les feuilles de style d'impression.
Que fait l’astuce de la taille de la police de 62,5 % ?
La définition de la taille de la police html à 62,5 % fait que la taille de la police racine est de 10 px, donc 1rem devient un 10 px pratique et les mathématiques rem se transforment en déplacement de la décimale - 1.6rem est 16 px, 2.4rem est 24 px. Pour modéliser cela dans le convertisseur, définissez la taille de la police de base sur 10 et lisez la colonne rem.
Dois-je utiliser PX ou REM pour les tailles de police ?
Rem est généralement préféré pour les tailles de police car il évolue avec la préférence de taille de police du navigateur user' ; s, ce qui améliore l'accessibilité, contrairement à px fixe. De nombreuses équipes conçoivent en px et convertissent en rem pour le CSS final. Les détails de mise en page comme les bordures restent souvent en px.
Pourquoi la valeur convertie a-t-elle parfois des décimales longues ?
Certaines conversions ne sont pas exactes - 15 px à une base de 16 px est 0,9375 rem, et les valeurs pt produisent souvent des décimales répétitives L'outil arrondit à quelques décimales et coupe les zéros de fin pour la lisibilité Pour des mises en page parfaites en pixels, arrondissez les valeurs rem à deux ou trois décimales ou choisissez une base qui divise vos tailles proprement.
