Convertisseur d'unités CSS

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

Le Convertisseur d'unités CSS est un outil gratuit qui fonctionne dans le navigateur et traduit une seule longueur CSS en sept unités courantes : px, rem, em, pt, %, vw et vh. Les développeurs front-end et les designers web l'utilisent pour faire passer une mise en page des pixels absolus aux unités responsives, pour vérifier à combien de pixels correspond un rem avec une taille de police racine personnalisée, ou pour convertir une valeur en pt issue de l'impression en pixels d'écran. Comme rem dépend de la taille de police racine, em et % de la taille de police du parent, et vw/vh du viewport, le convertisseur expose les quatre sous forme de réglages ajustables. Saisis une valeur, choisis son unité d'origine, et tous les champs de résultat se mettent à jour en même temps. Un extrait CSS prêt à coller liste les sept équivalents sous forme de déclarations font-size.

Comment utiliser Convertisseur d'unités CSS

1. Ouvre les Réglages et définis la taille de police racine (le font-size du html sur lequel rem se base), la taille de police du parent (pour em et %) ainsi que la largeur et la hauteur du viewport (pour vw et vh).
2. Saisis le nombre que tu veux convertir dans le champ de valeur.
3. Choisis l'unité d'origine dans le menu déroulant « De » : px, rem, em, pt, %, vw ou vh.
4. Lis chaque équivalent dans les champs de résultat étiquetés et en lecture seule ; ils sont tous recalculés automatiquement lorsque tu modifies la valeur, l'unité ou n'importe quel réglage.
5. Copie l'extrait CSS généré pour coller les sept équivalents font-size directement dans ta feuille de style.

Exemples

Racine 16px, valeur 16, De px

rem = 1

Racine 10px, valeur 2, De rem

px = 20

valeur 16, De px

pt = 12

Questions fréquentes

Entre quelles unités convertit-il ?

Sept unités de longueur CSS : px, rem, em, pt, %, vw et vh. N'importe laquelle peut être l'unité d'origine, et les sept équivalents s'affichent en même temps.

Pourquoi dois-je définir les tailles racine, parent et viewport ?

Ces unités sont relatives. rem est un multiple de la taille de police racine (html), em et % sont relatives à la taille de police du parent, et vw/vh sont des pourcentages de la largeur et de la hauteur du viewport. En les définissant dans les Réglages, tu indiques au convertisseur à quoi correspond chaque unité relative.

Comment pt est-il géré ?

CSS définit 96px = 1in = 72pt, donc 1pt équivaut à 4/3 px et 1px équivaut à 0,75pt. Le convertisseur utilise ce rapport fixe, indépendant de la taille de police ou du viewport.

Que se passe-t-il si une valeur ou un réglage est invalide ?

Si la valeur n'est pas un nombre fini, ou si l'une des tailles racine, parent ou viewport est manquante, nulle ou négative, les champs de résultat affichent un tiret (—) jusqu'à ce que tu fournisses des nombres valides.

Quelque chose est-il envoyé à un serveur ?

Non. Toutes les conversions s'exécutent entièrement côté client dans ton navigateur, sans aucun envoi ni appel à un serveur, donc les valeurs que tu saisis ne quittent jamais ton appareil.