Convertisseur d'unités CSS
Saisissez une valeur une fois et voyez-la dans toutes les unités de longueur CSS — px, rem, em, pt, %, vw et vh — avec la taille de police racine, la taille de police du parent et le viewport de votre choix. Copiez n'importe quel résultat d'un seul geste.
Conversions courantes
Converti dans toutes les unités
rem, em et % dépendent de la taille de police ; vw et vh dépendent du viewport. px et pt ont un rapport fixe (1pt = 1,3333px). Ajustez le contexte ci-dessus si vos valeurs par défaut diffèrent.
Référence px vers rem (racine = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
Avec la taille de police racine par défaut de 16px, divisez les pixels par 16 pour obtenir des rem, et multipliez par 0,75 pour obtenir des points.
À propos du convertisseur d'unités CSS
CSS offre plusieurs façons d'exprimer une longueur, et choisir la bonne fait la différence entre une mise en page qui s'adapte avec élégance et une autre qui casse. Ce convertisseur transforme une seule valeur dans toutes les unités CSS courantes à la fois. px (pixels) est l'unité de référence absolue — en CSS, un pixel est défini comme 1/96 de pouce. rem est relatif à la taille de police racine du document (l'élément <html>), qui vaut 16px par défaut, donc 1rem = 16px et 1,5rem = 24px ; rem est le standard moderne pour le dimensionnement, car modifier une seule valeur racine redimensionne toute la page, ce qui est excellent pour l'accessibilité. em est relatif à la taille de police du parent, il se cumule donc en cas d'imbrication. pt (points) est l'unité d'impression, fixée à 1pt = 1/72 de pouce = 1,3333px, donc 12pt = 16px. % dans un contexte de font-size est égal à la taille de police du parent, ce qui rend 100% identique à 1em. vw et vh valent 1% de la largeur et de la hauteur du viewport — idéal pour des mises en page fluides en plein écran. Définissez votre propre taille de police racine, taille de police du parent et taille du viewport dans le panneau avancé ; les valeurs par défaut sensées (16/16/1920×1080) couvrent d'emblée le cas quotidien px↔rem.
Comment convertir des unités CSS
- 1 Saisissez une valeur et choisissez l'unité dans laquelle elle est exprimée (par exemple 24 px ou 1,5 rem).
- 2 Lisez la valeur équivalente dans toutes les autres unités dans la grille de résultats, et appuyez sur le bouton de copie de n'importe quelle carte pour la copier prête à coller (par ex. « 1.5rem »).
- 3 Ouvrez le panneau avancé pour modifier la taille de police racine, la taille de police du parent ou la taille du viewport si votre projet n'utilise pas les valeurs par défaut 16px / 1920×1080.
Les formules de conversion
Chaque conversion passe par les pixels à l'aide des rapports fixes de CSS : rem = px ÷ taille-de-police-racine (16 par défaut) — donc px = rem × 16. em = px ÷ taille-de-police-du-parent (16 par défaut). pt = px × 0,75, car 1px = 1/96 de pouce et 1pt = 1/72 de pouce, ce qui donne 1pt = 96/72 px = 1,3333px et 1px = 0,75pt. % = px ÷ taille-de-police-du-parent × 100 (pourcentage de font-size, où 100% = la taille de police du parent, identique à 1em). vw = px ÷ largeur-du-viewport × 100, et vh = px ÷ hauteur-du-viewport × 100. Avec les valeurs par défaut, cela signifie 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Si une base telle que la taille de police racine est réglée sur 0, l'unité correspondante devient indéfinie et s'affiche « — » plutôt qu'infini.
Questions fréquentes
Combien de px font 1rem ?
Par défaut, 1rem = 16px, car rem est relatif à la taille de police racine (<html>) et les navigateurs la fixent à 16px d'origine. Donc 1,5rem = 24px et 2rem = 32px. Si vous modifiez la taille de police racine — par exemple à 10px pour simplifier les calculs — alors 1rem vaut cette valeur (16px deviendraient 1,6rem). Définissez votre propre taille de police racine dans le panneau avancé et le convertisseur recalcule instantanément.
Quelle est la formule de px vers rem ?
rem = px ÷ taille-de-police-racine, et inversement px = rem × taille-de-police-racine. Avec la racine par défaut de 16px, cela signifie diviser une valeur en pixels par 16 pour obtenir des rem : 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. On préfère rem à px pour les tailles de police et les espacements, car il respecte le réglage de taille de police du navigateur de l'utilisateur, ce qui est meilleur pour l'accessibilité.
Quelle est la taille de police racine par défaut ?
La taille de police racine par défaut dans tous les principaux navigateurs est de 16px, appliquée à l'élément <html>. C'est la base de rem, donc 1rem = 16px à moins que vous (ou une feuille de style) ne la remplaciez. Ce convertisseur utilise 16px par défaut pour la taille de police racine et celle du parent ; vous pouvez modifier l'une ou l'autre dans le panneau avancé pour correspondre à votre projet.
Quelle est la différence entre px et pt ?
px (pixel) est l'unité standard pour les écrans et est définie en CSS comme 1/96 de pouce. pt (point) est l'unité traditionnelle d'impression/typographie, égale à 1/72 de pouce. Le rapport est donc fixe : 1pt = 96/72 px ≈ 1,3333px, et 1px = 0,75pt. Ainsi 12pt = 16px, ce qui explique pourquoi un document imprimé en 12pt et un titre à l'écran en 16px paraissent de la même taille. Utilisez px (ou rem) pour le web et réservez pt aux feuilles de style d'impression.
Outils associés
Continuez à construire sur UnitConv. Convertissez les couleurs entre HEX, RGB et HSL avec le convertisseur de couleurs, générez des dégradés CSS, vérifiez les rapports de contraste WCAG, calculez les rapports d'aspect et explorez les unités de longueur au-delà du web dans le convertisseur d'unités principal.