Convertisseur d’unités CSS
Convertir une valeur entre px, rem, em, pt, vw et vh, en tenant compte de la taille de police de base, de celle de l’élément et de la fenêtre.
Essayer un autre outil
Une sélection pour compléter cet outilCe convertisseur traduit une valeur CSS entre six unités : px (pixels), rem (relatif à la police de l’élément racine), em (relatif à la police de l’élément), pt (points), vw et vh (pourcentages de la largeur et de la hauteur de la fenêtre). Les unités relatives dépendent d’un contexte, que l’on règle : taille de police racine (16 px par défaut dans les navigateurs), taille de police de l’élément, largeur et hauteur de la fenêtre. Toutes les conversions s’affichent en même temps.
Comment utiliser cet outil
- 01Saisir la valeurIndiquez la valeur et choisissez son unité de départ.
- 02Régler le contexteTaille de police racine et de l’élément, largeur et hauteur de la fenêtre.
- 03Lire les conversionsLa valeur s’affiche dans les six unités ; copiez celle qu’il vous faut.
Dans quels cas est-ce utile ?
- Intégration webTraduire les mesures d’une maquette en pixels vers des unités relatives.
- TypographieDéfinir des tailles de texte en rem qui suivent les réglages du lecteur.
- Mise en page adaptativeEstimer l’effet de vw et vh selon la taille de l’écran.
Exemples
- De px en remAvec une police racine de 16 px, 24 px valent 1,5 rem.
- Des points en pixels12 pt valent 16 px, car un point vaut 1/72 de pouce et un pixel CSS 1/96 de pouce.
- Une largeur relativeSur une fenêtre de 1 440 px de large, 50vw correspondent à 720 px.
Conseils pour un meilleur résultat
- Préférer rem pour le texteLes tailles en rem respectent la taille de police choisie par l’utilisateur dans son navigateur, un point important pour l’accessibilité.
- Attention à emLes em se cumulent dans les éléments imbriqués : 1,2 em dans 1,2 em donnent 1,44 fois la taille de départ.
- vh sur mobileSur mobile, la barre d’adresse change la hauteur visible : les unités dvh et svh tiennent compte de cet effet.
Unités absolues
px et pt sont fixes : en CSS, 1 px vaut 1/96 de pouce et 1 pt 1/72 de pouce, donc 1 pt = 1,333 px. Le pixel CSS n’est pas forcément un pixel physique sur les écrans haute densité.
Unités relatives
rem dépend de la taille de police de l’élément racine (html), em de celle de l’élément lui-même, vw et vh de 1 % de la largeur et de la hauteur de la fenêtre.
Confidentialité
Les calculs se font dans le navigateur ; rien n’est envoyé ni enregistré.
Questions fréquentes
Comment convertir des px en rem ?
Divisez par la taille de police racine : avec 16 px, 24 px ÷ 16 = 1,5 rem.
Quelle est la taille de police par défaut ?
16 px dans les navigateurs, sauf si l’utilisateur ou la feuille de style la modifient.
Quelle différence entre rem et em ?
rem se réfère toujours à l’élément racine ; em à l’élément courant, ce qui le rend sensible à l’imbrication.
Combien de pixels fait un point ?
1,333 px : 12 pt valent 16 px.
Que valent 100vw ?
La largeur totale de la fenêtre, barre de défilement comprise.
Mes valeurs sont-elles enregistrées ?
Non. Les valeurs CSS converties restent dans votre navigateur.
Faut-il écrire les tailles de police en px ou en rem ?
En rem de préférence : elles s’adaptent à la taille de police choisie par l’utilisateur, ce qui améliore l’accessibilité, tout en restant prévisibles.
Que valent 50vh sur un téléphone ?
La moitié de la hauteur de la fenêtre ; sur mobile, cette hauteur varie quand la barre d’adresse apparaît ou disparaît.