Convertisseur d'unités CSS
Convertissez les unités de longueur CSS — px, rem, em, pt et % — en direct dans votre navigateur. Définissez une taille de police racine et chaque unité se met à jour instantanément.
Chaque conversion est calculée localement dans votre navigateur ; les valeurs que vous tapez ne sont jamais téléversées.
Vous travaillez avec des couleurs CSS ? Essayez le Convertisseur de couleurs CSS.
À propos de Convertisseur d’unités CSS
Ce convertisseur d'unités CSS transforme une longueur que vous tapez dans une unité en toutes les autres unités CSS à la fois — px, rem, em, pt et %. Saisissez une valeur dans n'importe quel champ et les autres se mettent à jour en direct, vous pouvez donc lire un résultat px vers rem ou pt vers px sans faire le calcul à la main. Un champ de taille de police racine (16px par défaut) pilote les relations rem, em et %, ce qui reproduit la façon dont les navigateurs résolvent les unités relatives par rapport à la taille de police de la page. Une référence rapide intégrée montre les valeurs px-vers-rem courantes que les designers réutilisent — 12, 14, 16, 24, 32 et plus — à la base de votre choix. Chaque résultat dispose d'un bouton de copie pour le coller directement dans une feuille de style. Tout s'exécute dans votre navigateur, donc les valeurs que vous tapez restent sur votre appareil.
Fonctionnalités
- Convertit entre px, rem, em, pt et % dès que vous tapez dans n'importe quel champ
- Une taille de police racine configurable pilote rem, em et % pour que les résultats correspondent à votre CSS
- Conversion pt précise avec le facteur CSS 96/72 (1pt = 1.3333px)
- Traite % comme une fraction de la taille de police racine, comme le CSS relatif à la police
- Tableau de référence rapide des valeurs px-vers-rem courantes (12, 14, 16, 24, 32) à votre base
- Arrondit les résultats à une précision sensée et supprime les zéros superflus pour des valeurs propres
- Copie en un clic sur chaque unité, avec le suffixe d'unité inclus
- Mémorise votre dernière valeur et taille de police de base entre les visites
Comment utiliser Convertisseur d’unités CSS
- Définissez la taille de police racine si elle diffère de la valeur par défaut de 16px du navigateur.
- Tapez une valeur dans n'importe quel champ d'unité — px, rem, em, pt ou %.
- Lisez la valeur équivalente dans chaque autre unité, mise à jour en direct.
- Cliquez sur le bouton de copie à côté d'une unité pour récupérer la valeur avec son suffixe.
- Utilisez le tableau de référence rapide pour les paires px-vers-rem courantes à votre base.
Exemple
Entrée
/* root font-size: 16px */
.card { padding: 24px; }
Sortie
.card { padding: 1.5rem; }
/* 24px = 1.5rem = 18pt = 150% at base 16px */
À une base de 16px, 24px équivaut à 1.5rem — pratique pour passer une mise en page en rem.
Erreurs courantes et dépannage
- Vos résultats rem et % semblent erronés alors que px est correct. — Vérifiez la taille de police racine. rem, em et % sont résolus par rapport à cette base, donc réglez-la pour correspondre au font-size de votre élément :root ou html.
- pt ne correspond pas à ce que vous voyez dans un outil de design. — Ce convertisseur utilise la définition CSS où 1pt = 96/72 px (1.3333px). Les outils d'impression ou de PAO peuvent supposer 72dpi, ce qui donne plutôt 1pt = 1px.
- em et rem affichent le même nombre, mais vous vous attendiez à ce qu'ils diffèrent. — Le convertisseur utilise une seule base pour les deux par simplicité. En CSS réel, em est relatif à la taille de police propre de l'élément tandis que rem est relatif à la racine, ils ne divergent donc que lorsqu'un parent change de font-size.
- Les champs se vident lorsque vous laissez la taille de police racine vide. — Une base vide ou nulle est traitée comme invalide ; le convertisseur revient à 16px. Tapez un nombre positif pour piloter rem, em et % vous-même.
Foire aux questions
- Comment convertir px en rem ?
- Tapez la valeur en pixels dans le champ px et lisez le champ rem. rem est la valeur divisée par la taille de police racine, donc à la base par défaut de 16px, 16px vaut 1rem et 24px vaut 1.5rem.
- Comment convertir rem en px ?
- Tapez la valeur dans le champ rem et lisez px. rem vers px est la valeur multipliée par la taille de police racine, donc 2rem à une base de 16px vaut 32px.
- Quelle taille de police de base le convertisseur utilise-t-il ?
- Il utilise 16px par défaut, la taille de police racine standard du navigateur, et vous pouvez la changer dans le champ Taille de police racine. Cette base pilote chaque résultat rem, em et % pour qu'ils correspondent à votre feuille de style.
- Pourquoi 1pt vaut-il 1.3333px ici ?
- Le CSS définit 1pt comme 1/72 de pouce et 1px comme 1/96 de pouce, donc 1pt = 96/72 px = 1.3333px. C'est pourquoi 12pt se convertit exactement en 16px, la taille de corps de texte courante.
- Quelle est la différence entre em et rem ?
- rem est relatif à la taille de police racine, tandis que em est relatif à la taille de police propre de l'élément. Cet outil utilise une seule base pour les deux par simplicité, donc ils affichent la même valeur ; réglez la taille de police racine pour modéliser le côté rem.
- La conversion est-elle effectuée sur un serveur ?
- Non. La conversion d'unités CSS s'exécute entièrement dans votre navigateur avec de simples calculs, donc les valeurs que vous saisissez restent sur votre appareil.
Outils associés
Tous les outils ArrayKit