Convertisseur d'unités CSS

Convertissez instantanément entre px, rem, em, pt, vw, vh et %, en utilisant votre propre taille de police de base et vos dimensions de fenêtre d'affichage — plus besoin de deviner ce que 1,5rem représente réellement en pixels.

Qu'est-ce que Convertisseur d'unités CSS ?

CSS prend en charge plusieurs unités différentes pour le dimensionnement — des unités absolues comme px et pt, et des unités relatives comme rem, em, vw, vh et %. Les unités relatives sont essentielles pour un design responsive et accessible (rem en particulier respecte la préférence de taille de police du navigateur de l'utilisateur), mais les convertir mentalement est réellement difficile, car le résultat dépend du contexte : la taille de police racine, la taille de police de l'élément actuel, ou les dimensions de la fenêtre d'affichage.

Ce convertisseur fait ce calcul pour vous : définissez votre taille de police de base, les dimensions de votre fenêtre d'affichage et la valeur que vous convertissez, et voyez instantanément la valeur équivalente dans chaque autre unité — utile pour traduire les mesures en pixels d'une maquette de design en valeurs rem/vw responsives, ou pour vérifier ce qu'une règle CSS existante affiche réellement à l'écran.

Formule

1rem = 1em = taille de police de base (16px par défaut)

1pt = 96/72 px ≈ 1,333px

1vw = largeur de la fenêtre d'affichage / 100

1vh = hauteur de la fenêtre d'affichage / 100

1% = valeur de référence / 100

Comment calculer

Saisissez la valeur que vous voulez convertir et sélectionnez son unité de départ.
Définissez votre taille de police de base (par défaut la norme du navigateur de 16px).
Pour les conversions vw/vh, saisissez la largeur et la hauteur de fenêtre d'affichage cibles.
Lisez instantanément la valeur équivalente dans chaque autre unité.

Exemple

Avec une taille de police de base de 16px, 1,5rem se convertit en 24px. Avec une largeur de fenêtre d'affichage de 1440px, 5vw se convertit en 72px.

Avantages Clés

Convertit entre les 7 unités CSS courantes en un seul endroit
Utilise votre taille de police de base et votre fenêtre d'affichage réelles, pas une hypothèse fixe
Résultats instantanés pendant la saisie — pas besoin d'ouvrir les outils de développement du navigateur
Gratuit, sans inscription, fonctionne entièrement dans votre navigateur

Erreurs Courantes à Éviter

Supposer que 1rem équivaut toujours à 16px, sans vérifier si la taille de police racine a été modifiée
Utiliser vh pour des mises en page plein écran mobiles sans tenir compte du comportement de la barre d'adresse du navigateur
Imbriquer des tailles de police basées sur em et être surpris par une accumulation inattendue
Mélanger px et rem de façon incohérente au sein d'un même composant, ce qui casse l'adaptation à l'accessibilité

Conseils de Pro

Préférez rem à em pour les tailles de police afin d'éviter une accumulation inattendue dans les composants imbriqués
Utilisez dvh/svh plutôt que vh pour les mises en page plein écran mobiles si vos navigateurs cibles le prennent en charge
Gardez une taille de police de base cohérente dans votre système de design pour que les conversions rem restent prévisibles
Lors de la traduction d'un design au pixel près, convertissez les espacements en rem mais gardez les largeurs de bordure et autres détails fins en px

Termes Clés Expliqués

Taille de police racine: La taille de police définie sur l'élément html, à laquelle toutes les unités rem sont relatives
Fenêtre d'affichage (viewport): La zone visible d'une page web dans la fenêtre du navigateur
Unité absolue: Une unité comme px ou pt avec une taille réelle fixe, indépendante de tout contexte
Unité relative: Une unité comme rem, em, vw ou % dont la taille dépend d'une autre valeur

Cas d'utilisation courants

Convertir une spécification Figma/Sketch en pixels d'un designer en valeurs rem pour un CSS accessible
Vérifier ce qu'une taille de police responsive basée sur vw affiche réellement à une largeur d'écran donnée
Traduire un ancien CSS d'impression ou d'e-mail basé sur pt en px ou rem conformes aux normes web
Vérifier si l'échelle d'espacement d'un système de design s'aligne proprement entre les unités
Vérifier rapidement une valeur CSS lors d'une revue de code sans ouvrir les outils de développement

Questions fréquentes

Quelle est la différence entre rem et em ?

rem est toujours relatif à la taille de police de l'élément racine (html), donc elle reste constante peu importe la profondeur d'imbrication d'un élément. em est relatif à la taille de police de l'élément actuel lui-même, ce qui signifie qu'elle peut s'accumuler en cas d'imbrication — cet outil traite les deux de la même façon par souci de simplicité, en utilisant votre taille de police de base.

Pourquoi 1rem équivaut-il généralement à 16px ?

16px est la taille de police par défaut du navigateur pour l'élément racine html dans pratiquement tous les navigateurs. Puisque rem est relatif à cette taille racine, 1rem équivaut à 16px sauf si la page (ou les paramètres du navigateur de l'utilisateur) modifie explicitement la taille de police racine.

À quoi servent vw et vh ?

vw (largeur de la fenêtre d'affichage) et vh (hauteur de la fenêtre d'affichage) sont des pourcentages de la largeur et de la hauteur actuelles de la fenêtre du navigateur — 1vw équivaut à 1 % de la largeur de la fenêtre d'affichage. Ils sont couramment utilisés pour les mises en page plein écran et la typographie responsive qui s'adapte à l'écran.

Un pixel fait-il toujours exactement 1/96e de pouce ?

Selon la spécification CSS, oui — un pixel CSS est défini comme 1/96e de pouce, ce qui explique aussi pourquoi 1pt (1/72 de pouce) se convertit en exactement 96/72 = 1,333 pixel CSS.

Outils connexes

Calculateur de rapport d'aspect

Calculateur de bande passante

Calculateur de temps de téléchargement

Calculateur de coûts d'hébergement cloud

Calculateur de coût CDN

Calculateur de monétisation des Interface de Programmation