Skip to main content
FreeToolkit .ai

Convertisseur d'unités CSS Convertir entre px, em, rem, %, vw, vh, vmin et vmax avec une fenêtre de visualisation et une taille de police configurables.

Convertisseur d'unités CSS illustration
⚖️

Convertisseur d'unités CSS

Convertir entre px, em, rem, %, vw, vh, vmin et vmax avec une fenêtre de visualisation et une taille de police configurables.

1

Configurer le contexte

Définissez les dimensions de votre fenêtre d'affichage, la taille de police de base et la taille de l'élément parent.

2

Saisir une valeur

Tapez la valeur CSS à convertir.

3

Sélectionner les unités

Choisissez les unités CSS source et cible.

Loading tool...

What Is Convertisseur d'unités CSS?

Un convertisseur d'unités CSS traduit entre les différentes unités de longueur disponibles dans le CSS, en tenant compte des unités dépendantes du contexte. Les unités fixes (px) représentent toujours la même taille visuelle. Les unités relatives dépendent du contexte : em et rem sont liées aux tailles de police, % est lié à l'élément parent, et les unités de viewport (vw, vh, vmin, vmax) sont liées aux dimensions de la fenêtre du navigateur. Ce convertisseur vous permet de configurer toutes les variables de contexte (taille de la viewport, taille de police de base, taille de l'élément parent) pour des conversions précises entre n'importe quelle unité CSS, ce qui rend les calculs de conception réactive rapides et précis.

Why Use Convertisseur d'unités CSS?

  • Dimensions de fenêtre d'affichage configurables pour des calculs vw/vh précis.
  • Taille de police de base ajustable pour les conversions em/rem.
  • Taille de l'élément parent pour les calculs de pourcentage.
  • Les huit unités de longueur CSS essentielles.
  • Parfait pour le flux de travail de conception réactive.

Common Use Cases

Conception réactive

Calculez les valeurs vw pour la typographie fluide et les dispositions.

Design-to-Code

Convertissez les spécifications de conception basées sur les pixels en unités CSS réactives.

Accessibilité

Convertissez les tailles de pixel fixes en unités rem relatives.

Débogage du layout

Comprenez comment les différentes unités CSS se traduisent par des tailles de pixel réelles.

Technical Guide

Les unités de longueur CSS se divisent en deux catégories :

Absolues :
• px : pixel CSS (1/96 de pouce dans le CSS, mais 1 pixel d'appareil sur les écrans standard)

Relatives :
• em : relative à la taille de police de l'élément. 2em = 2 × la taille de police actuelle
• rem : relative à la taille de police racine (élément html). Plus prévisible que em
• % : relative à la valeur de propriété correspondante de l'élément parent
• vw : 1% de la largeur de la viewport. 100vw = largeur complète de la viewport
• vh : 1% de la hauteur de la viewport. 100vh = hauteur complète de la viewport
• vmin : 1% de la plus petite dimension de la viewport
• vmax : 1% de la plus grande dimension de la viewport

Modèles réactifs courants :
• Typographie fluide : font-size : clamp(1rem, 2vw + 0,5rem, 2rem)
• Sections hauteur complète : min-height : 100vh
• Espacement réactif : padding : 5vw

Tips & Best Practices

  • 1
    Utilisez rem pour les tailles de police (accessibilité). Utilisez px pour les bordures et les ombres (précision).
  • 2
    vmin est idéal pour les conteneurs carrés réactifs.
  • 3
    clamp() avec des unités vw permet une typographie fluide sans requêtes multimédias.
  • 4
    100vh sur mobile peut inclure la barre d'adresse - utilisez 100dvh (hauteur de fenêtre dynamique) à la place.
  • 5
    En cas de doute, commencez par rem et px. Ajoutez vw/vh uniquement lorsque vous avez besoin d'un dimensionnement relatif à la fenêtre d'affichage.

Related Tools

Convertisseur de longueur - free online tool

Convertisseur de longueur

Convertissez instantanément entre millimètres, centimètres, mètres, kilomètres, pouces, pieds, yards, miles et milles nautiques.

⚖️ Unit Converters
Convertisseur de luminance - free online tool

Convertisseur de luminance

Convertir entre candela/m², nits, lamberts et foot-lamberts.

⚖️ Unit Converters
Convertisseur d'unités de typographie - free online tool

Convertisseur d'unités de typographie

Convertir entre px, pt, em, rem, cm, mm, pouces et pica avec une taille de police de base configurable.

⚖️ Unit Converters
Convertisseur de distances astronomiques - free online tool

Convertisseur de distances astronomiques

Convertir entre kilomètres, miles, unités astronomiques (AU), années-lumière et parsecs.

⚖️ Unit Converters

Frequently Asked Questions

Q Comment convertir des px en vw ?
Divisez la valeur px par la largeur de la fenêtre d'affichage et multipliez par 100. Exemple : 192px sur une fenêtre d'affichage de 1920px = 192/1920 × 100 = 10vw.
Q Quelle est la différence entre vw et % ?
vw est toujours relatif à la largeur de la fenêtre d'affichage. % est relatif à l'élément parent, qui peut être plus petit que la fenêtre d'affichage.
Q Quand utiliser rem au lieu de em ?
Utilisez rem pour un dimensionnement cohérent par rapport à la racine (pas de surprises en cascade). Utilisez em lorsque vous voulez que le dimensionnement soit proportionnel à la taille de police du parent le plus proche.
Q Qu'est-ce que vmin ?
vmin équivaut à 1 % de la plus petite dimension de la fenêtre d'affichage (largeur ou hauteur). Sur une fenêtre d'affichage de 1920×1080, 1vmin = 10,8px.
Q Pourquoi les pages 100vh ont-elles des barres de défilement sur mobile ?
Les navigateurs mobiles incluent la barre d'adresse dans le calcul de la hauteur de la fenêtre d'affichage. Utilisez 100dvh (hauteur de fenêtre dynamique) ou JavaScript pour obtenir la hauteur réellement visible.

About This Tool

Convertisseur d'unités CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.