Convertisseur d'unités CSS

Convertisseur Unités Css Conversion Px Rem Em Conversion Pourcentage Conversion Vw Vh Vmin Outil Conversion Css Simulateur Résolution Outil Web Gratuit Css Responsive Typographie Responsive Outil Web Gratuit

Convertisseur d'unités CSS complet : px, rem, em, %, vw, vh, vmin. Conversion instantanée avec simulation de différentes résolutions et tailles de police.

📏

Valeur à convertir

Font-size root (base)

Utilisé pour rem/em (défaut: 16px)

Font-size parent (pour em)

Font-size du conteneur parent

Largeur viewport (vw/vmin)

Simulez différentes résolutions

Hauteur viewport (vh/vmin)

Simulez différentes résolutions

Résultats des conversions

px 16 px

rem (÷ 16) 1 rem

em (÷ parent) 1 em

% (÷ parent) 100 %

vw (÷ viewport) 0.83 vw

vh (÷ viewport) 1.48 vh

vmin (plus petit côté) 0.83 vmin

Tableau de conversions rapides

px	rem (÷16)	em (÷parent)	% (÷parent)	vw (1920px)	vh (1080px)	vmin

Qu'est-ce que les unités CSS ?

Les unités CSS définissent les dimensions, marges, paddings et tailles de police dans vos pages web. Le choix de la bonne unité est crucial pour créer des designs responsive et maintenables.

Pourquoi c'est important ?

✅ Flexibilité — Adapte-toi à différentes tailles d'écran
✅ Accessibilité — Respecte les préférences utilisateur (zoom, user preferences)
✅ Maintenabilité — Plus facile à maintenir et modifier globalement
✅ Performance — Moins de recalculs lors du redimensionnement
✅ Scalabilité — Changements globaux sans modifier chaque propriété

Il existe deux catégories principales : les unités absolues et les unités relatives.

Unités absolues (px)

Le pixel (px) est l'unité absolue la plus utilisée. Un pixel a toujours la même taille quelle que soit la résolution.

⚠️ Attention : Bien que simple, les pixels purs devraient être limités aux éléments non-textuels (bordures, ombres, images). Pour la typographie, préférez rem/em.

Caractéristiques de px

Absolu — 16px = 16px partout
Fixe — Ne change pas avec le zoom utilisateur (bad for accessibility)
Prévisible — Exact et déterministe
Limité — Difficile à adapter à différentes résolutions

Exemple

body {
  font-size: 16px; /* ❌ À éviter pour la typographie */
  padding: 16px;   /* ✅ OK pour l'espacé */
}

button {
  border: 1px solid #ccc; /* ✅ OK pour les bordures */
}

Unités relatives (rem, em, %)

Les unités relatives sont calculées par rapport à une valeur de référence. Elles sont essentielles pour créer des designs responsive et accessibles.

📏 rem (root em)

1 rem = font-size de l'élément root (<html>), par défaut 16px au navigateur.

✅ Cohérent — Toujours par rapport à la même référence
✅ Global — Changer root font-size = change tout automatiquement
✅ Accessible — Respecte les préférences utilisateur
❌ Non affecté par le parent direct

html {
  font-size: 16px; /* Base du projet */
}

body {
  font-size: 1rem; /* = 16px */
  padding: 1rem;   /* = 16px */
}

h1 {
  font-size: 2rem; /* = 32px (2 × 16) */
  margin: 0.5rem;  /* = 8px */
}

p {
  font-size: 1rem; /* = 16px */
  line-height: 1.5; /* = 24px */
}

📝 em (relative au parent)

1 em = font-size du parent direct. L'héritage est important !

✅ Local — Relatif au parent
✅ Modulaire — Composants sont indépendants
❌ Complexe — Peut créer des effet de cascade
⚠️ Attention aux imbrications

.container {
  font-size: 16px; /* Base du conteneur */
}

.container p {
  font-size: 1em; /* = 16px (parent) */
  margin: 0.5em; /* = 8px (parent) */
}

.container .nested {
  font-size: 0.875em; /* = 14px */
  padding: 1em; /* = 14px (parent local, pas global!) */
}

% (pourcentage)

% = pourcentage du parent. Surtout utilisé pour les widths et heights.

.container {
  width: 100%; /* Pleine largeur du parent */
  height: 100vh; /* Pleine hauteur de la viewport */
}

.column {
  width: 50%; /* Moitié de la largeur du parent */
}

Unités viewport (vw, vh, vmin)

Les unités viewport sont basées sur la taille de la fenêtre du navigateur, idéales pour les designs responsive modernes.

📺 vw (viewport width)

1 vw = 1% de la largeur du viewport

✅ Responsive à la résolution
✅ Parfait pour hero sections
❌ Peut créer du scrollbar horizontal
⚠️ Utilisez avec max-width/min-width

/* Hero section responsif */
.hero {
  height: 100vh; /* Pleine hauteur */
  width: 100%;
  font-size: 6vw; /* Titre responsive */
}

/* Évite overflow horizontal */
.container {
  width: 100vw;
  overflow-x: hidden;
}

📏 vh (viewport height)

1 vh = 1% de la hauteur du viewport

/* Section fullscreen */
section {
  min-height: 100vh;
}

/* Modal qui prend la hauteur du viewport */
.modal {
  max-height: 90vh;
  overflow-y: auto;
}

🔄 vmin (minimum viewport)

1 vmin = 1% du côté le plus petit (width ou height)

/* Carré responsive (adapté à l'orientation) */
.square {
  width: 50vmin;
  height: 50vmin;
  /* 50vmin × 50vmin en portrait */
  /* Ajuste en fonction du plus petit côté */
}

/* Responsive sans overflow */
.banner {
  font-size: 5vmin; /* Ajuste en portrait et landscape */
}

Bonnes pratiques et recommandations

🎯 Règle d'or : Utilisez rem pour la typographie, px pour les bordures/ombres, % et vw/vh pour le layout responsive.

✅ Bonnes pratiques

Typography (font-size, line-height, letter-spacing) → Utilisez rem
Spacing (margin, padding) → Utilisez rem ou em
Layout (width, max-width) → Utilisez % ou rem
Responsive fluid → Utilisez clamp() avec rem
Hero sections → Utilisez vh/vw avec max-width
Borders, shadows → px est OK
Toujours définir une base → font-size: 16px sur html ou body

❌ À éviter

❌ px pour la typographie (ignores les préférences utilisateur)
❌ Mélanger px et rem n'importe comment (inconsistance)
❌ Imbrications em profonde (cascade confuse)
❌ 100% width sur body (peut créer du scrollbar horizontal)
❌ Oublier max-width avec vw (overflow)

💡 Exemple de base projet

/* CSS Reset moderne */
html {
  font-size: 16px; /* Base 16px */
  scroll-behavior: smooth;
}

body {
  font-family: 'System Font', sans-serif;
  font-size: 1rem; /* = 16px */
  line-height: 1.5;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Typography scale */
h1 {
  font-size: 2.5rem; /* 40px */
  line-height: 1.2;
  margin: 1rem 0;
}

h2 {
  font-size: 2rem; /* 32px */
  margin: 0.875rem 0;
}

h3 {
  font-size: 1.5rem; /* 24px */
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Spacing */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 3rem 0;
}

/* Responsive fluid avec clamp() */
.hero h1 {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
}

Cas d'usage et exemples réels

🎯 Cas 1 : Site responsive moderne

/* Configuration base */
html { font-size: 16px; }

/* Responsive typography avec clamp() */
.hero-title {
  font-size: clamp(1.5rem, 8vw, 4rem);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Sections */
.section {
  padding: 3rem 1rem;
}

/* Cartes responsives */
.card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .section { padding: 1.5rem 0.5rem; }
  .card { padding: 1rem; }
}

🎯 Cas 2 : Design system avec em/rem

/* Base typography */
html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.6; }

/* Button component (scalable with em) */
.btn {
  padding: 0.5em 1em;
  font-size: 1em;
  border-radius: 0.25em;
  border: 1px solid currentColor;
}

.btn-lg { font-size: 1.25rem; }
.btn-sm { font-size: 0.875rem; }

/* Avantage: padding et border-radius s'ajustent automatiquement ! */

🎯 Cas 3 : Hero section fullscreen

/* Hero section responsive */
.hero {
  height: 100vh; /* Pleine hauteur */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(...);
}

.hero-content {
  text-align: center;
  max-width: 90%;
}

.hero-title {
  font-size: clamp(2rem, 7vw, 4rem);
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: rgba(255,255,255,0.9);
}

✨ Tableau comparatif d'utilisation

Propriété	Meilleure unité	Exemple	Raison
font-size	rem	1.5rem	Responsive global
margin/padding	rem	1rem, 0.5rem	Cohérent avec typo
line-height	Sans unité	1.5	Meilleure pratique
width (container)	% ou rem	100%, 50rem	Responsive layout
border	px	1px, 2px	Contrôle précis
box-shadow	px	0 2px 8px	Contrôle précis
Hero height	vh	100vh	Fullscreen responsive
Titre responsive	vw avec clamp	clamp(1.5rem, 5vw, 3rem)	Fluide adaptatif

🤖 - Convertisseur d'unités CSS — Convertissez facilement vos unités