Convertisseur d'unités CSS
Convertissez entre les unités CSS : px, rem, em, vw, vh et %. Configurez la taille de police de base et les dimensions de la fenêtre pour des résultats précis.
Paramètres
Toutes les équivalences
| Unité | Valeur |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Référence rapide (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
Comment convertir des unités CSS
- Définissez votre taille de police de base (par défaut : 16px) et les dimensions de la fenêtre
- Saisissez une valeur et sélectionnez son unité (px, rem, em, vw, vh ou %)
- Consultez toutes les valeurs équivalentes dans les autres unités CSS
- Consultez le tableau de référence rapide pour les conversions px-vers-rem courantes
Cas d'utilisation
- •Design responsive : convertissez des valeurs en pixels fixes en unités fluides rem ou vw
- •Transfert de design : traduisez les spécifications en pixels de Figma/Sketch en valeurs rem CSS
- •Accessibilité : utilisez les unités rem pour que le texte respecte les préférences de taille de police de l'utilisateur
- •Mise en page : calculez des dimensions relatives à la fenêtre pour les sections pleine largeur
Formule
Les conversions d'unités CSS dépendent de la taille de police de base et des dimensions de la fenêtre. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
Questions fréquemment posées
Quelle est la différence entre rem et em ?
rem est relatif à la taille de police de l'élément racine (html). em est relatif à la taille de police de l'élément parent. Au niveau racine, ils sont identiques.
Quelle est la taille de police par défaut des navigateurs ?
La plupart des navigateurs utilisent 16px par défaut. Cela signifie que 1rem = 16px, sauf si la taille de police racine est modifiée.
Quand dois-je utiliser vw/vh ?
Utilisez vw (largeur de la fenêtre) et vh (hauteur de la fenêtre) pour les éléments qui doivent se redimensionner proportionnellement à la fenêtre du navigateur, comme les sections hero ou les arrière-plans plein écran.
Comment convertir px en rem ?
Divisez la valeur en pixels par la taille de police de base. Avec la valeur par défaut de 16px : 24px ÷ 16 = 1.5rem.
À quoi l'unité % est-elle relative ?
L'unité % est contextuelle en CSS. Pour font-size, elle est relative au font-size du parent. Pour width, elle est relative à la largeur du parent.