Unités CSS
Saisissez une valeur et choisissez l’unité pour voir la même taille dans toutes les unités CSS, prête à copier.
La même taille dans d’autres unités
- 1.5remtaille de police racine
- 1.5emtaille de police du parent
- 150%pourcentage de la taille de police du parent
- 18ptpoints
- 1.5pcpicas
- 0.25inpouces
- 0.635cmcentimètres
- 6.35mmmillimètres
- 25.4Qquarts de millimètre
- 1.6667vwpourcentage de la largeur du viewport
- 2.6667vhpourcentage de la hauteur du viewport
- 2.6667vminpourcentage du plus petit côté du viewport
- 1.6667vmaxpourcentage du plus grand côté du viewport
Contexte
Px en rem pour 16 px
| px | rem | pt |
|---|---|---|
| 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 |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Un point vaut 1,333 px, puisqu’un pouce vaut 96 px et 72 pt. Dans l’autre sens, un pixel vaut 0,75 pt.
Comment ça marche
Le rem se base sur la taille de police de l’élément html, qui est de 16 px dans tous les navigateurs tant qu’on ne la modifie pas. 24 px font donc 1,5 rem. Définir html { font-size: 62.5% } donne 10 px par rem et simplifie le calcul mental, mais modifie aussi tout ce qui repose sur la taille par défaut.
L’em se base sur la taille de police du parent et se cumule donc lorsque les éléments sont imbriqués : 1,2 em dans 1,2 em donne une taille 1,44 fois plus grande. Le pourcentage pour font-size fonctionne de la même façon, 100 % valant 1 em. Le pourcentage pour les largeurs ou les marges se base en revanche sur le bloc conteneur et n’est pas converti ici.
Le rem est le choix habituel pour les tailles de police et les espacements, car la page suit alors la taille choisie par le visiteur dans son navigateur. Le px dans les tailles de police n’empêche pas le zoom, mais ignore ce réglage, ce qu’abordent les recommandations WCAG sur le redimensionnement du texte.
Vw et vh valent un pour cent de la largeur et de la hauteur du viewport, vmin et vmax un pour cent de son côté le plus court et le plus long. Les valeurs dépendent entièrement de la fenêtre : le bouton reprend donc la taille de celle que vous utilisez en ce moment. Sur mobile, vh peut changer quand la barre d’adresse apparaît ; dvh, svh et lvh règlent ce problème.
Pt, pc, in, cm, mm et Q sont des unités absolues aux rapports fixes en CSS : un pouce vaut 96 px, 72 pt et 2,54 cm. À l’écran, cela correspond rarement à de vrais centimètres, car un pixel CSS n’est pas un pixel physique. Elles sont surtout utiles dans les feuilles de style pour l’impression.
Les valeurs s’écrivent avec un point décimal et au plus quatre décimales, comme l’exige CSS.