La conversion d'unités CSS est le processus de transformation entre diverses unités de longueur (px, em, rem, %, vw, vh, etc.) utilisées en design web.
Unités absolues et relatives
Les unités CSS se répartissent en unités absolues et relatives. Les unités absolues (px, pt, cm, etc.) ont des tailles fixes, tandis que les unités relatives (em, rem, %, vw, vh, etc.) s'expriment en proportion d'une valeur de base.
px (Pixel)
L'unité la plus courante, représentant un point à l'écran. Facile à manipuler grâce à sa taille fixe, mais pose des défis d'accessibilité car elle ignore les paramètres de taille de police de l'utilisateur.
em (Em)
Unité relative basée sur la taille de police de l'élément parent. 1em = taille de police du parent. Se calcule de manière cumulative dans les structures imbriquées, ce qui peut entraîner des tailles inattendues.
rem (Root Em)
Unité relative basée sur la taille de police de l'élément racine (html). 1rem = font-size du html (généralement 16px). Contrairement à em, elle n'est pas affectée par l'imbrication et est recommandée en CSS moderne.
% (Pourcentage)
Représente une proportion par rapport à l'élément parent. Pour font-size, elle se base sur la font-size du parent ; pour width, sur la largeur du parent. La référence varie selon la propriété.
vw/vh (Unités viewport)
Unités basées sur la taille du viewport. 1vw = 1% de la largeur du viewport, 1vh = 1% de la hauteur du viewport. Permettent des mises en page flexibles adaptées à la taille de l'écran.
pt/pc (Unités d'impression)
Unités utilisées dans l'industrie de l'impression. 1pt = 1/72 pouce, 1pc = 12pt. Utilisées en CSS d'impression et génération de PDF ; à l'écran on préfère généralement px ou rem.
Unités physiques (cm/mm/in)
Unités représentant une longueur physique réelle. 1in = 2.54cm = 25.4mm = 96px (définition CSS). Utilisées lorsque la cohérence avec des matériaux imprimés est nécessaire, mais la taille physique de l'écran n'est pas garantie.
Avantages de la conversion en temps réel
Cet outil prend en charge la conversion en temps réel et met à jour les résultats instantanément lors des modifications des valeurs de base. Permet de vérifier rapidement l'apparence sur différentes tailles d'écran et réglages de police.