Convertisseur PX en REM
Convertissez les valeurs en pixels CSS en unités REM (root em) et vice versa. Supporte la taille de police de base personnalisée, la conversion par lots et la recherche de classe Tailwind CSS.
px
Conversion Table (base: 16px)
| px | rem |
|---|---|
| 8 | 0.5rem |
| 10 | 0.625rem |
| 12 | 0.75rem |
| 14 | 0.875rem |
| 16 | 1rem |
| 18 | 1.125rem |
| 20 | 1.25rem |
| 24 | 1.5rem |
| 32 | 2rem |
| 48 | 3rem |
| 64 | 4rem |
| 96 | 6rem |
| 128 | 8rem |
| Tailwind | rem |
|---|---|
| text-xs | 0.75rem |
| text-sm | 0.875rem |
| text-base | 1rem |
| text-lg | 1.125rem |
| text-xl | 1.25rem |
| text-2xl | 1.5rem |
| text-3xl | 1.875rem |
| text-4xl | 2.25rem |
| text-5xl | 3rem |
| text-6xl | 3.75rem |
| p-1 | 0.25rem |
| p-2 | 0.5rem |
| p-3 | 0.75rem |
| p-4 | 1rem |
| p-5 | 1.25rem |
| p-6 | 1.5rem |
| p-8 | 2rem |
| p-10 | 2.5rem |
| p-12 | 3rem |
Comment utiliser Convertisseur PX en REM
- 1Entrez une valeur en pixels ou rem à convertir.
- 2Définissez votre taille de police de base (16px par défaut).
- 3Consultez le résultat de la conversion instantanément.
- 4Consultez le tableau de conversion complet pour les tailles courantes.
ZenovayAnalytics
Voyez qui est sur votre site en ce moment.
- 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 et rem ?▾
px (pixels) est une unité absolue — 16px est toujours 16px indépendamment des paramètres utilisateur. rem (root em) est relative à la taille de police de l'élément racine (élément html). La taille de police racine par défaut du navigateur est 16px, donc 1rem = 16px par défaut. Si un utilisateur change la taille de police de son navigateur (pour l'accessibilité), les unités rem s'ajustent en conséquence mais les unités px ne le font pas. Cela rend rem préféré pour les tailles de police et l'espacement dans les designs accessibles.
Pourquoi utiliser rem au lieu de px ?▾
rem respecte les préférences de taille de police utilisateur définies dans les paramètres d'accessibilité du navigateur. Les utilisateurs ayant des déficiences visuelles peuvent augmenter la taille de police de base à 20px ou 24px — les mises en page rem s'ajustent correctement, les mises en page px ne le font pas. rem facilite aussi la mise à l'échelle : changez la taille de police racine et toutes les valeurs rem s'ajustent proportionnellement. WCAG 2.1 Critère de succès 1.4.4 (Redimensionner le texte) recommande les unités évolutives. Tailwind CSS utilise rem pour tous les utilitaires de taille.
Comment Tailwind CSS gère-t-il rem ?▾
Tailwind utilise une base de 1rem = 16px par défaut. L'unité de base 4px : text-xs (12px = 0,75rem), text-sm (14px = 0,875rem), text-base (16px = 1rem), text-lg (18px = 1,125rem), text-xl (20px = 1,25rem), text-2xl (24px = 1,5rem). Espacement : p-4 = 1rem = 16px, p-8 = 2rem = 32px. Pour changer la base : définissez html { font-size: 10px } et ensuite 1rem = 10px (faire 1rem = 10px est une astuce courante : 16px = 1,6rem).
Qu'est-ce que l'astuce 62.5% ?▾
La définition de html { font-size: 62.5% } rend la taille de police racine 62.5% de 16px = 10px. Cela signifie 1rem = 10px, simplifiant le calcul mental : 16px = 1,6rem, 24px = 2,4rem, 100px = 10rem. Cela rend rem aussi facile à utiliser que px. Inconvénient : vous devez vous souvenir de définir body { font-size: 1.6rem } (16px pour le texte du corps) puisque html est maintenant 10px. Certaines équipes évitent cela car il remplace les préférences de taille de police utilisateur (62.5% de la taille choisie par l'utilisateur, pas 16px).
Quand devrais-je utiliser em au lieu de rem ?▾
em est relative à la taille de police de l'élément parent (pas racine). Utilisez em pour : mise à l'échelle au niveau du composant (le remplissage du bouton s'ajuste avec la taille de police du bouton), requêtes de média (les requêtes basées sur em respectent mieux les changements de taille de police utilisateur que les requêtes px), letter-spacing et line-height relative à la taille de police de l'élément courant. Évitez em pour l'espacement de la mise en page où les composants imbriqués pourraient causer une mise à l'échelle composée inattendue. rem pour l'échelle globale, em pour les valeurs relatives au composant.