Convertisseur d’unités CSS

Il est utile lorsqu’une maquette, une feuille de style, un document ou une bibliothèque de composants emploie une autre unité que votre projet. Saisissez la valeur, choisissez les unités source et cible, puis définissez la référence en pixels. Le convertisseur applique les rapports CSS normalisés et fournit un nombre clair ainsi qu’une valeur CSS prête à copier.

Choisissez soigneusement la source, la cible et la référence

Saisissez d’abord la partie numérique de la longueur CSS sans son unité, puis sélectionnez l’unité source correspondante. Choisissez px, em, rem ou pt comme cible et indiquez une taille de police de base positive en pixels. Cette base régit toute conversion depuis ou vers em ou rem. Par exemple, avec une base de 16 pixels, 2rem donnent 32px et 24px donnent 1.5em. En CSS, em dépend généralement de la taille calculée de l’élément concerné ou de son parent, tandis que rem dépend de l’élément racine. L’outil ne proposant qu’un champ de base, utilisez la référence adaptée : taille locale pour em et taille racine pour rem. Les conversions limitées à px et pt ne dépendent pas mathématiquement de cette référence, mais le champ reste obligatoire afin de conserver un contrat explicite et uniforme. Cette visibilité évite aussi de supposer que tous les sites utilisent une racine de 16px.

Comprenez le calcul et l’arrondi

Le convertisseur normalise la valeur source en pixels CSS, puis transforme ces pixels dans l’unité cible. Les unités relatives utilisent la base fournie : une valeur em ou rem est multipliée par la base pour obtenir des pixels, et une valeur en pixels est divisée par celle-ci pour obtenir em ou rem. Les points suivent le rapport CSS standard de 96 pixels par pouce et 72 points par pouce ; 1pt vaut donc 96 divisé par 72 pixels CSS. Le passage systématique par les pixels rend prévisibles toutes les paires, y compris pt vers rem et em vers pt. Vous pouvez choisir de zéro à douze décimales. L’arrondi intervient uniquement après le calcul complet afin d’éviter les erreurs intermédiaires. La réponse contient les unités normalisées, la base, le nombre arrondi et une chaîne telle que 1.5rem. Si les unités sont identiques, la valeur validée est simplement arrondie. Les nombres non finis et les bases inférieures ou égales à zéro sont refusés.

Préservez l’intention de la conception

Un résultat numérique exact ne suffit pas à garantir une bonne migration CSS. Avant de remplacer des unités dans une feuille de style, déterminez si la mesure initiale devait évoluer avec la typographie. Les pixels et les points sont essentiellement des mesures CSS absolues, alors que em et rem suivent la taille de police. Convertir une bordure fixe de px en rem modifie son comportement lorsque l’utilisateur ou un thème change la police racine ; cela peut convenir aux espacements, mais surprendre pour les traits fins. Testez les déclarations aux tailles de police minimale et maximale de votre interface, notamment les interlignes, commandes et mises en page adaptatives. Dans un système de design, consignez la base de chaque lot pour rendre les valeurs reproductibles. L’API est déterministe et ne dépend ni du réseau, ni du hasard, ni de l’horloge ; elle convient donc aux scripts de build, générateurs et tests. Les pourcentages, unités de viewport, centimètres et expressions mixtes sont rejetés au lieu d’être devinés. Pour calc(), convertissez séparément chaque terme compatible.