Convertisseur d'unités CSS

Qu'est-ce que la conversion d'unités CSS ?

Un convertisseur d'unités CSS est un outil qui traduit les valeurs de longueur entre différents systèmes de mesure CSS. CSS définit plus d'une douzaine d'unités de longueur, réparties en deux groupes : les unités absolues comme px, pt, cm et in, qui correspondent à des mesures physiques fixes, et les unités relatives comme rem, em, vw, vh et %, qui dépendent du contexte — taille de police ou dimensions du viewport.

Les navigateurs résolvent toutes les longueurs CSS en pixels lors du rendu. Lorsque vous écrivez 1.5rem, le navigateur multiplie 1.5 par la taille de police racine (généralement 16px) pour obtenir 24px. Lorsque vous écrivez 50vw, il prend la moitié de la largeur courante du viewport. Comprendre ces relations est indispensable pour construire des mises en page qui s'adaptent à tous les appareils et respectent les préférences utilisateur, comme une taille de police personnalisée définie dans le navigateur.

La spécification CSS Values and Units Module Level 4 (W3C) définit les ratios de conversion exacts entre toutes les unités absolues : 1in = 96px = 72pt = 2.54cm = 25.4mm. Les unités relatives n'ont pas de ratio fixe car elles dépendent du contexte d'exécution. Un convertisseur d'unités CSS gratuit vous permet de calculer ces relations instantanément en fonction de votre taille de police racine et de vos dimensions de viewport, sans écrire une seule ligne de code.

Pourquoi utiliser un convertisseur d'unités CSS ?

Convertir des unités CSS à la main, c'est mémoriser des ratios, sortir une calculatrice et vérifier ses calculs. Cet outil effectue la conversion dans votre navigateur, sans friction.

Cas d'utilisation du convertisseur d'unités CSS

Référence des unités de longueur CSS

CSS définit 10 unités de longueur couramment utilisées. Les unités absolues ont une conversion fixe en pixels. Les unités relatives dépendent du contexte : la taille de police racine pour rem, la taille de police parente pour em, et le viewport du navigateur pour vw et vh.

Unités CSS absolues vs relatives

Le choix entre unités absolues et relatives détermine la façon dont votre mise en page réagit aux différentes résolutions et aux paramètres utilisateur. Chaque groupe présente des compromis distincts.

Table de conversion px vers rem courante

Cette table suppose une taille de police racine de 16px (valeur par défaut du navigateur). Si votre projet utilise une base différente, divisez la valeur en pixels par votre base pour obtenir l'équivalent rem.

Exemples de code

Ces exemples montrent comment convertir des unités CSS par programmation en JavaScript, Python, via des propriétés CSS personnalisées et en Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Questions fréquentes