Comment convertir les unités CSS entre pixels, rem, em et vw

À quoi sert le convertisseur d’unités CSS ?

Convertissez une valeur numérique d’une unité CSS vers une autre en indiquant l’unité source, l’unité cible et, si nécessaire, les paramètres qui influencent les unités relatives. L’outil prend en charge px, em, rem, %, vw, vh, pt, cm, mm et in. Il peut donc servir à comparer des tailles exprimées en pixels, des tailles relatives à une base et des dimensions liées à la fenêtre d’affichage.

Procédure de conversion

1. Saisissez la valeur numérique à convertir. Si vous laissez cette valeur vide, la valeur utilisée est 16.
2. Indiquez l’unité source, par exemple px, puis l’unité cible, par exemple rem. Les unités sont traitées en minuscules. En l’absence de choix, la source est px et la cible est rem.
3. Vérifiez la taille de base. Elle sert aux conversions en em, rem et %, ainsi qu’aux valeurs sources exprimées dans ces unités. Sa valeur par défaut est 16.
4. Pour vw et vh, renseignez les dimensions de la fenêtre d’affichage si elles ne correspondent pas aux valeurs proposées. Les valeurs par défaut sont une largeur de 1920 et une hauteur de 1080.
5. Lancez la conversion et consultez la valeur obtenue. Le calcul passe d’abord par une valeur en pixels, puis vers l’unité cible. Le résultat converti et cette valeur intermédiaire sont arrondis à quatre décimales.

Pour une valeur source en em ou rem, le nombre est multiplié par la taille de base. Une valeur en pourcentage est multipliée par cette base puis divisée par 100. Une valeur en vw utilise la largeur de la fenêtre, tandis qu’une valeur en vh utilise sa hauteur. Les unités absolues suivent leurs facteurs en pixels : 1 pt vaut 1,33333 pixel, 1 cm vaut 37,795 pixels, 1 mm vaut 3,7795 pixels et 1 in vaut 96 pixels.

Comprendre le résultat et ses limites

Interprétez le résultat selon l’unité cible choisie. Pour em et rem, la valeur en pixels est divisée par la taille de base. Pour %, elle est multipliée par 100 puis divisée par cette base. Pour vw et vh, elle est rapportée respectivement à la largeur et à la hauteur de la fenêtre d’affichage. Les conversions vers pt, cm, mm et in utilisent l’inverse des facteurs en pixels indiqués plus haut.

Une taille de base nulle produit 0 pour une cible em, rem ou %. De même, une largeur nulle produit 0 pour une cible vw, et une hauteur nulle produit 0 pour une cible vh. Une unité source non reconnue est interprétée comme une valeur déjà exprimée en pixels. Une unité cible non reconnue laisse la valeur en pixels inchangée : vérifiez donc les libellés avant de retenir le résultat.

Si une exception survient pendant le calcul, l’opération renvoie un résultat signalé comme non réussi et contient le texte de l’exception.

Exemple pratique

Vous préparez une règle CSS dont la taille de référence est de 16 pixels et souhaitez exprimer cette valeur en rem.

Saisissez 16, choisissez px comme unité source et rem comme unité cible, puis conservez la taille de base à 16 avant de lancer la conversion.

Le résultat réussi affiche une valeur convertie de 1,0000 rem et une valeur intermédiaire de 16,0000 pixels.

Limites

• Les valeurs relatives dépendent de la taille de base ou des dimensions de la fenêtre d’affichage, tandis que les unités absolues utilisent les facteurs de conversion en pixels indiqués par l’outil.

Erreurs fréquentes

• Une faute de frappe dans le libellé, comme rme au lieu de rem, peut passer inaperçue : les unités non reconnues suivent un traitement de passage par les pixels. Sélectionnez un libellé pris en charge et vérifiez l’unité source comme l’unité cible avant de relancer le calcul.

Questions fréquentes

Comment convertir des pixels en rem ?

Indiquez px comme unité source et rem comme unité cible. Avec les valeurs par défaut, 16 px et une base de 16 donnent 1,0000 rem.

Comment convertir une valeur en vw ou en vh ?

Renseignez la dimension correspondante. Une valeur en vw utilise la largeur de la fenêtre d’affichage, tandis qu’une valeur en vh utilise sa hauteur ; les valeurs par défaut sont 1920 et 1080.

Que se passe-t-il si l’unité saisie n’est pas reconnue ?

Une unité non reconnue n’est pas systématiquement rejetée. Un libellé source inconnu est traité comme une valeur en pixels et un libellé cible inconnu conserve la valeur en pixels. Vérifiez les unités prises en charge avant d’utiliser le résultat.