Aller au contenu
EN

Convertisseur d'unités CSS

Convertissez une valeur entre px, rem, em, %, vw, vh, pt, cm, mm et pouces, avec la taille de police et d'écran de votre choix. Tableau px en rem inclus.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Convertissez n'importe quelle valeur CSS vers toutes les autres unités en même temps : pixels, rem, em, pourcentages, vw, vh, vmin, vmax, points, picas, pouces, centimètres, millimètres et quarts de millimètre. Le contexte (taille de police de la page et du parent, taille d'écran et du parent) est réglable, et un tableau donne les correspondances px/rem/pt courantes.

Dans quels cas l'utiliser ?

Passer une maquette en rem

Les maquettes donnent des tailles en pixels ; les convertir en rem rend le site respectueux de la taille de police choisie par le visiteur.

Préparer une feuille de style d'impression

Les tailles en points et en millimètres sont celles de l'imprimerie : convertissez vos px pour un document imprimé fidèle.

Comprendre une valeur en vw

Combien fait 5vw sur un écran de 1440 px ? Réglez la largeur d'écran et lisez la taille en pixels.

Mode d'emploi

  1. Saisissez une valeur et son unité.
  2. Lisez la conversion dans toutes les autres unités.
  3. Ajustez le contexte (taille de police, écran) si besoin, puis copiez.

Comment ça marche

Toutes les conversions passent par le pixel CSS. Les unités absolues suivent les rapports fixés par CSS (1 in = 96 px = 2,54 cm = 72 pt = 6 pc) ; les unités relatives utilisent les tailles du contexte.

Les résultats sont arrondis à quatre décimales, ce qui suffit pour toute valeur CSS. Vos réglages de contexte sont gardés dans votre navigateur.

Conseils pour un bon résultat

  • Utilisez rem pour les tailles de texte et les espacements : le site s'adapte au réglage de police du visiteur.
  • Gardez px pour les bordures fines et les ombres.
  • Évitez em pour les tailles de police imbriquées : l'effet se cumule.
  • vw seul pour une taille de texte empêche le zoom : combinez-le avec rem dans clamp().

Problèmes fréquents et solutions

Le résultat en rem n'est pas celui attendu

La taille de police de la racine n'est peut-être pas 16 px dans votre projet : réglez-la dans le contexte.

Les % ne correspondent pas

En CSS, % ne se rapporte pas toujours à la largeur du parent (hauteur, taille de police…). Le calcul suppose la largeur.

Les cm à l'écran ne font pas 1 cm

C'est normal : à l'écran, CSS fixe 1 cm à 37,8 px, quelle que soit la taille réelle des pixels.

Questions fréquentes

Combien font 16 px en rem ?

1 rem avec la taille de police par défaut des navigateurs (16 px). La formule est : rem = px ÷ taille de police de la racine.

Quelle différence entre rem et em ?

rem se rapporte à la taille de police de la page (balise html), em à celle de l'élément parent. em se cumule dans les éléments imbriqués, pas rem.

Pourquoi le résultat en % ou en vw dépend-il du contexte ?

Ces unités sont relatives : % à la largeur du parent, vw et vh à la taille de l'écran. Réglez ces tailles dans le contexte du calcul.

Les cm et les pouces CSS sont-ils réels ?

Non à l'écran : CSS fixe 1 pouce = 96 px. Ils sont exacts à l'impression.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.