Convertisseur PX en REM + tableau complet de 1 à 128px | We.Inc
Convertissez px en rem et rem en px avec n'importe quelle taille de police racine. Tableau complet de 1 à 128px avec les classes Tailwind, un convertisseur de blocs CSS et une aide pour les tailles fluides avec clamp().
Convertisseur PX en REM
Pour convertir des pixels en rem, divisez la valeur en pixels par la taille de police racine. Avec la valeur par défaut du navigateur de 16px, 24px font 1.5rem et 12px font 0.75rem. Saisissez une valeur dans l'un ou l'autre champ pour convertir dans les deux sens, changez la taille racine si votre site utilise une autre base, ou collez des règles CSS entières.
Tailles courantes avec la racine par défaut de 16px
Pixels
Usage typique
Légendes, petites étiquettes
Texte secondaire, boutons
Texte courant
Grand texte courant, petits titres
Titres de section, marges internes des cartes
Titres de page, espacements entre sections
Titres de hero
Un convertisseur dans les deux sens avec une taille racine personnalisable, un tableau complet de 1 à 128 pixels avec la classe Tailwind correspondante, un convertisseur de blocs CSS entiers et une aide qui écrit des tailles fluides avec clamp().
Définissez la taille de police racine. Laissez 16, sauf si votre feuille de style fixe une autre taille sur l'élément html.
Saisissez une valeur dans le champ pixels pour obtenir des rem, ou dans le champ rem pour obtenir des pixels. Les deux se mettent à jour pendant la saisie.
Faites défiler le tableau pour trouver n'importe quelle taille de 1 à 128 pixels. Cliquez sur une ligne pour copier sa valeur en rem.
Collez du CSS dans le convertisseur de blocs pour passer toutes les valeurs px en rem d'un coup. Zéro devient 0 et les bordures de 1px restent en pixels, sauf si vous décochez cette option.
Utilisez l'aide clamp() pour obtenir une taille de police qui grandit progressivement entre une largeur de téléphone et une largeur d'ordinateur.
Gardez la taille de police du html à 100% (la valeur par défaut du navigateur) au lieu de la fixer à 62.5%. L'astuce des 62.5% fait que 1rem vaut 10px, mais elle rétrécit tous les composants tiers qui supposent 16px.
Utilisez rem pour les tailles de police et la plupart des espacements, afin que toute la mise en page s'adapte quand quelqu'un augmente la taille de texte par défaut de son navigateur.
Laissez les bordures fines et les décalages de box-shadow en px. Une bordure de 1px qui devient 0.0625rem peut s'afficher floue ou disparaître à certains niveaux de zoom.
Les media queries en em ou en rem suivent aussi le réglage de police de l'utilisateur. La plupart des navigateurs considèrent 1em dans une media query comme la taille par défaut du navigateur, et non comme votre règle html.
Questions fréquentes
Combien de pixels vaut 1rem ?
1rem est égal à la taille de police de l'élément racine html. Les navigateurs la fixent par défaut à 16px, donc 1rem vaut 16px sauf si le site ou le visiteur la modifie. Si un visiteur règle sa taille de texte par défaut sur 20px, 1rem devient 20px sur tout site qui n'a pas fixé la taille racine en pixels.
Quelle est la différence entre rem et em ?
rem est toujours relatif à la taille de police de la racine html. em est relatif à la taille de police de l'élément lui-même (ou de son parent, lorsqu'il est utilisé sur font-size). Les tailles en em imbriquées se multiplient : une liste à 1.2em dans une liste à 1.2em finit à 1.44 fois la base. rem ne se cumule jamais, c'est pourquoi la plupart des design systems l'utilisent.
Faut-il utiliser px ou rem pour les tailles de police ?
Utilisez rem. Un texte défini en px ignore le réglage de taille de police par défaut du navigateur, que certaines personnes augmentent pour lire confortablement. Le zoom de page fonctionne toujours avec px, mais pas la préférence de taille de police, donc rem est le choix le plus accessible.
Comment les classes Tailwind correspondent-elles aux rem ?
Dans l'échelle d'espacement par défaut de Tailwind, chaque palier vaut 0.25rem, soit 4px avec une racine de 16px. Ainsi p-4 vaut 1rem (16px) et gap-6 vaut 1.5rem (24px). Les tailles de police utilisent des noms : text-sm vaut 0.875rem et text-base vaut 1rem. Le tableau de cette page indique la classe pour chaque taille présente dans l'échelle par défaut.
Cet outil envoie-t-il mon CSS quelque part ?
Non. Chaque conversion s'exécute dans votre navigateur et rien de ce que vous saisissez ou collez n'est envoyé.
Pourquoi rem existe
Les pixels en CSS sont des unités fixes. Un titre défini à 32px reste à 32px même quand un visiteur a demandé à son navigateur d'afficher un texte plus grand. L'unité rem règle ce problème en liant les tailles à la taille de police racine, qui suit par défaut le réglage du visiteur. Changez un seul nombre et toutes les tailles en rem de la page s'adaptent.
Cela fait de rem un bon choix pour la typographie, les marges internes et externes et la largeur des colonnes de texte. Les pixels restent pertinents pour ce qui ne doit pas suivre le texte, comme un séparateur de 1px ou la taille d'une image dont les dimensions en pixels sont fixes.
rem et em côte à côte
L'exemple en direct de cette page applique la même taille de 1.25 sur trois niveaux d'imbrication, une fois en em et une fois en rem. La version em grandit à chaque niveau car chaque enfant multiplie la taille de son parent. La version rem reste identique à chaque profondeur car elle se réfère toujours à la racine.
em reste utile quand un élément doit s'adapter à son propre texte, comme la marge interne d'un bouton ou l'espace après une icône. Définissez la taille de police du bouton en rem et sa marge interne en em, et changer la taille de police redimensionne tout le bouton.
Tailles fluides avec clamp()
clamp(min, preferred, max) prend la valeur préférée mais ne descend jamais sous le minimum ni ne dépasse le maximum. Utiliser un mélange de rem et de vw pour la valeur préférée fait grandir un titre progressivement avec la largeur de la fenêtre tout en respectant la taille de police de l'utilisateur.
L'aide calcule la droite entre deux points, par exemple 32px sur un téléphone de 375px de large et 56px sur un ordinateur de 1280px, et l'écrit sous forme d'expression rem plus vw. Testez le résultat à plusieurs largeurs, car des pentes en vw très fortes peuvent faire grandir le texte plus vite que la longueur de ses lignes.
Convertir
Taille de police racine (px)
Pixels
(racine {n}px)
Copier rem
Copier px
Racine {n}px
Convertir un bloc CSS
CSS en px
Le même CSS en rem
Garder les valeurs de 1px en px
Copier le CSS converti
Taille fluide avec clamp()
Taille minimale (px)
Taille maximale (px)
Largeur de départ (px)
Largeur d'arrivée (px)
Saisissez des tailles supérieures à zéro et une largeur d'arrivée plus grande que la largeur de départ.
Copier clamp()
Redimensionnez la fenêtre pour voir cette ligne grandir.
em se cumule, rem non
Chaque niveau ci-dessous définit font-size: 1.25 dans son unité, sur trois niveaux d'imbrication.
Niveau {n}
Tableau complet px en rem
Racine {n}px. Cliquez sur une ligne pour copier sa valeur en rem.
Les classes Tailwind ne sont affichées qu'avec une racine de 16px, la taille sur laquelle leur échelle est construite.
{v} copié.
px en rem avec une racine de {n}px, de 1 à 128 pixels, avec les classes Tailwind