Convertisseur d'Unités CSS
Convertissez px en rem, em, %, pt, pc, in, cm, mm, vw et vh — toutes les unités de longueur CSS d'un coup, gratuitement et dans votre navigateur.
Base de calcul
Toutes les unités CSS
= 16 px
| Unité | Valeur convertie | Copier |
|---|---|---|
| px — Pixels | 16px | |
| rem — Em de la racine | 1rem | |
| em — Em du parent | 1em | |
| % — Pourcentage du parent | 100% | |
| pt — Points | 12pt | |
| pc — Picas | 1pc | |
| in — Pouces | 0.1667in | |
| cm — Centimètres | 0.4233cm | |
| mm — Millimètres | 4.2333mm | |
| vw — Largeur du viewport | 0.8333vw | |
| vh — Hauteur du viewport | 1.4815vh |
Tous les calculs se font dans votre navigateur. Rien de ce que vous saisissez n'est envoyé, journalisé ni conservé.
Comment Utiliser le Convertisseur d'Unités CSS
- Saisissez le nombre à convertir dans le champ de valeur — 24 par exemple — puis choisissez l'unité dans laquelle il est écrit aujourd'hui : px, rem, vw, etc.
- Renseignez « Taille de police racine » avec la valeur utilisée par votre élément html. Le navigateur applique 16px par défaut : 24px valent donc 1.5rem, et si vous passez à 10, les mêmes 24px deviennent 2.4rem.
- Remplissez « Taille de police du parent » lorsque vous travaillez en em ou en %. Ces deux unités se mesurent par rapport au parent et non à la racine, d'où leur champ dédié.
- Modifiez la largeur et la hauteur du viewport si vous concevez pour un breakpoint précis. Les valeurs par défaut (1920 × 1080) correspondent à un écran de bureau courant et alimentent les lignes vw et vh.
- Lisez le tableau de résultats — les onze unités se mettent à jour instantanément — et cliquez sur « Copier » sur n'importe quelle ligne pour récupérer une valeur prête à coller telle que 1.5rem.
Qu'est-ce qu'un Convertisseur d'Unités CSS ?
Un convertisseur d'unités CSS traduit une même mesure dans toutes les unités de longueur reconnues par la spécification, pour vous éviter de poser l'opération. La demande la plus fréquente reste px en rem : les maquettes Figma arrivent en pixels, alors qu'une feuille de style accessible s'écrit en rem afin que la mise en page suive la taille de police choisie par le visiteur.
Le calcul s'appuie sur le pixel de référence CSS. Un pouce vaut 96px, un point 96/72 px, un pica 16px, un centimètre 96/2.54 px et un millimètre 96/25.4 px. Les unités relatives dépendent du contexte : rem se multiplie par la taille racine, em et % par la taille du parent, tandis que vw et vh sont des pourcentages du viewport. Ces quatre valeurs étant modifiables ici, les résultats collent à votre projet réel.
Chaque résultat est arrondi à quatre décimales et débarrassé de ses zéros inutiles : 1.5000rem s'affiche donc simplement 1.5rem. Si vous manipulez aussi des mesures physiques ou d'autres grandeurs, le convertisseur d'unités couvre longueurs, poids et températures, la règle en ligne affiche des centimètres et des pouces à taille réelle, et le convertisseur de couleurs fait le même travail pour HEX, RGB et HSL.
Questions Fréquentes (FAQ)
Comment convertir des px en rem ?
Divisez la valeur en pixels par la taille de police racine. Avec la valeur par défaut de 16px, 24px ÷ 16 = 1.5rem et 12px ÷ 16 = 0.75rem. Saisissez les pixels ci-dessus, laissez la racine à 16 et la ligne rem donne la réponse aussitôt.
Comment passer de rem à px ?
Multipliez les rem par la taille de police racine : 2rem × 16 = 32px. Choisissez rem dans la liste « Unité de départ » et lisez la ligne px. Si votre feuille de style applique html { font-size: 62.5% }, mettez d'abord la racine à 10.
Quelle est la différence entre rem et em ?
rem se mesure toujours par rapport à la taille de police de la racine (html), alors que em se mesure par rapport au parent. em se cumule donc dès que vous imbriquez des éléments, raison pour laquelle racine et parent sont ici deux champs distincts.
Combien de pixels vaut 1pt en CSS ?
En CSS, 1pt vaut 96/72 px, soit exactement 1.3333px. 12pt s'affichent donc en 16px et 9pt en 12px. Le point vient de la typographie imprimée et reste courant dans les gabarits d'e-mails.
Comment convertir des vw en px ?
Multipliez les vw par la largeur du viewport puis divisez par 100 : 50vw sur un écran de 1920px font 960px. Indiquez votre breakpoint dans le champ de largeur — 1440, 1280 ou 390 sur mobile — et la ligne px se recalcule seule.
Faut-il utiliser px ou rem pour la typographie ?
Préférez rem pour les tailles de texte et les espacements : la mise en page respecte alors la préférence de taille de police du visiteur, ce qui est un gain d'accessibilité. px reste adapté aux bordures fines, aux ombres et à tout ce qui ne doit pas grandir.
Pourquoi le pourcentage change-t-il quand je modifie le parent ?
Les pourcentages de font-size et les espacements en em se résolvent par rapport au parent et non à la racine. Si le parent mesure 20px, alors 1em vaut 20px et 100% vaut 20px : ce champ déplace donc à la fois les lignes em et %.
Ce convertisseur d'unités CSS est-il gratuit et confidentiel ?
Oui. Il est gratuit, sans inscription, et fonctionne uniquement en JavaScript côté navigateur. Rien de ce que vous saisissez n'est transmis à un serveur ni partagé.
Conseils pour Convertir les Unités CSS
- Astuce 1 : Retenez les repères pour une racine à 16px : 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem. Pour le reste, laissez faire le tableau.
- Astuce 2 : Si votre projet applique html { font-size: 62.5% } pour que 1rem vaille 10px, réglez le champ racine sur 10 avant de copier quoi que ce soit, sinon chaque valeur en rem sera 60% trop petite.
- Astuce 3 : Évitez vw pour le texte courant. Une taille confortable à 1920px devient illisible à 360px : utilisez plutôt clamp() avec un minimum en rem et vérifiez les deux largeurs dans les champs ci-dessus.
- Astuce 4 : Vous construisez un design system ? Associez cette page à la règle en ligne pour vérifier les tailles physiques, et au convertisseur de base numérique pour relire les valeurs hexadécimales de vos couleurs.