Convertisseur Pixel en REM
Convertissez entre px et rem/em. Définissez votre taille de police racine, obtenez un tableau de conversion instantané pour toutes les tailles courantes.
px
Convert
px
rem
Conversion Table (root = 16px)
| px | rem | em | pt | |
|---|---|---|---|---|
| 4 | 0.25rem | 0.25em | 3pt | |
| 8 | 0.5rem | 0.5em | 6pt | |
| 10 | 0.625rem | 0.625em | 7.5pt | |
| 12 | 0.75rem | 0.75em | 9pt | |
| 14 | 0.875rem | 0.875em | 10.5pt | |
| 16 | 1rem | 1em | 12pt | |
| 18 | 1.125rem | 1.125em | 13.5pt | |
| 20 | 1.25rem | 1.25em | 15pt | |
| 24 | 1.5rem | 1.5em | 18pt | |
| 28 | 1.75rem | 1.75em | 21pt | |
| 32 | 2rem | 2em | 24pt | |
| 36 | 2.25rem | 2.25em | 27pt | |
| 40 | 2.5rem | 2.5em | 30pt | |
| 48 | 3rem | 3em | 36pt | |
| 56 | 3.5rem | 3.5em | 42pt | |
| 64 | 4rem | 4em | 48pt | |
| 72 | 4.5rem | 4.5em | 54pt | |
| 80 | 5rem | 5em | 60pt | |
| 96 | 6rem | 6em | 72pt | |
| 112 | 7rem | 7em | 84pt | |
| 128 | 8rem | 8em | 96pt |
Comment utiliser Convertisseur Pixel en REM
- 1Définissez votre taille de police racine (16px par défaut).
- 2Entrez une valeur en pixels à convertir en rem/em.
- 3Consultez le tableau de conversion complet pour les tailles courantes.
- 4Copiez n'importe quelle valeur directement du tableau.
ZenovayAnalytics
Analytics pensé pour les fondateurs.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Formateur et Validateur JSON
Formatez, validez et embellissez les données JSON avec la coloration syntaxique et la détection d'erreurs.Décodeur JWT
Décodez et inspectez les jetons JWT. Consultez l'en-tête, la charge utile et vérifiez les signatures.Encodeur/Décodeur Base64
Encodez du texte en Base64 ou décodez Base64 en texte. Supporte UTF-8 et les données binaires.Encodage / Décodage URL
Encodez ou décodez les composants URL. Traitez les caractères spéciaux, les chaînes de requête et les URL complètes.Questions fréquemment posées
Quelle est la différence entre px, rem et em ?▾
px (pixels) est une unité absolue — 1px est toujours 1 pixel indépendant du dispositif, indépendamment du contexte. rem (root em) est relative à la taille de police de l'élément racine (<html>). Si la racine est 16px, alors 1rem = 16px, 2rem = 32px. em est relative à la taille de police de l'élément actuel — si une div a font-size: 20px, alors 1em = 20px dans cette div. rem est préféré pour la mise en page car il est cohérent ; em est préféré pour la typographie au sein de composants qui ont besoin de s'adapter à leur propre taille de police.
Pourquoi utiliser rem au lieu de px ?▾
Les unités rem respectent les préférences de taille de police du navigateur de l'utilisateur. Quand un utilisateur augmente sa taille de police de base du navigateur pour l'accessibilité, les mises en page basées sur rem se dimensionnent proportionnellement. Les mises en page basées sur px ne le font pas. De plus, rem simplifie les mathématiques du système de design — si votre échelle de design est basée sur des incréments de 4px (0.25rem) ou 8px (0.5rem), les valeurs rem se traduisent directement. Tailwind CSS utilise rem pour tout l'espacement et la typographie (text-lg = 1.125rem = 18px au 16px racine par défaut).
Quelle taille de police racine dois-je utiliser ?▾
La valeur par défaut du navigateur est 16px. La plupart des systèmes de design (Tailwind, Material UI, Bootstrap) sont basés sur 16px. Si vous utilisez la taille de police racine 62.5% (base 10px — un truc courant : html { font-size: 62.5% }), alors 1rem = 10px, rendant les mathématiques plus simples (p. ex., 1.4rem = 14px). Le truc 62.5% a des implications d'accessibilité — il remplace la préférence de taille de police du navigateur de l'utilisateur pour tous les calculs rem.
Comment convertir les unités de viewport (vw, vh) ?▾
Les unités de viewport (vw, vh, svh, dvh) sont relatives à la taille du viewport, pas à la taille de police. 1vw = 1% de la largeur du viewport. 1vh = 1% de la hauteur du viewport. Pour convertir : valeur px = (valeur vw / 100) × largeur du viewport. Puisque la taille du viewport varie, vw/vh ne peut pas être exprimé comme une valeur px fixe — ce convertisseur se concentre sur les unités relatives à la police (px, rem, em).
Qu'est-ce que la fonction clamp() pour la typographie fluide ?▾
clamp(min, preferred, max) crée une valeur qui s'adapte entre un minimum et un maximum. Pour la typographie fluide : font-size: clamp(1rem, 2.5vw, 2rem) — la police s'adapte avec la largeur du viewport mais n'est jamais plus petite que 16px ou plus grande que 32px. Cela remplace plusieurs points de rupture pour la typographie. La valeur « preferred » est généralement une expression basée sur vw : calc(1rem + 0.5vw) ou similaire.