Quelle est la différence entre px et rem en CSS ?

Les pixels (px) sont des unités de taille fixe qui ne s'adaptent pas aux préférences de l'utilisateur, tandis que les unités rem sont relatives à la taille de police racine et se mettent automatiquement à l'échelle quand les utilisateurs modifient la taille de police par défaut de leur navigateur pour l'accessibilité.

Quand utiliser les unités vh et vw en CSS ?

Utilisez vh et vw pour les éléments qui doivent s'adapter au viewport, comme les sections hero plein écran (100vh), la typographie fluide et les mises en page qui doivent s'adapter à la taille de la fenêtre du navigateur.

Quelle est la meilleure unité CSS pour les tailles de police ?

Utilisez rem pour les tailles de police car cela respecte les préférences de taille de police du navigateur de l'utilisateur pour l'accessibilité, tout en maintenant des proportions cohérentes dans votre design.

px vs rem vs em vs vh : Quelle unité CSS devriez-vous vraiment utiliser ?

Introduction : Pourquoi les unités CSS sont importantes

Les unités CSS déterminent la taille de chaque élément sur votre page web -- des tailles de police et des espacements aux dimensions de mise en page et aux animations. Choisir la bonne unité pour le bon contexte est l'une des décisions les plus importantes en matière de design web responsive et accessible.

Utiliser les mauvaises unités entraîne des mises en page qui se cassent sur différentes tailles d'écran, un texte trop petit à lire sur mobile, et des designs qui ne respectent pas les préférences d'accessibilité des utilisateurs. Utiliser les bonnes unités crée des interfaces flexibles et responsives qui s'adaptent gracieusement à n'importe quel appareil et respectent les paramètres des utilisateurs.

Ce guide couvre toutes les unités CSS que vous devez connaître en 2026, avec des conseils pratiques sur quand et comment utiliser chacune. Si vous avez besoin de convertir entre différentes unités de mesure, essayez notre outil Convertisseur d'unités.

Unités absolues

Les unités absolues représentent des mesures fixes. Elles ne changent pas en fonction de l'élément parent, du viewport ou des paramètres utilisateur.

Pixels (px)

Les pixels sont l'unité absolue la plus couramment utilisée en développement web. Un pixel CSS correspond à un pixel de l'appareil sur un écran de densité standard, mais sur les écrans haute densité (Retina), un pixel CSS peut correspondre à plusieurs pixels de l'appareil.

.box {
  width: 300px;
  height: 200px;
  border: 1px solid #333;
  padding: 16px;
}

Quand utiliser les pixels :

Bordures et contours (border: 1px solid black)
Ombres (box-shadow: 0 2px 4px rgba(0,0,0,0.1))
Détails visuels fins qui ne doivent pas s'adapter
Points de rupture des media queries (@media (min-width: 768px))
Éléments de taille fixe comme les icônes

Quand NE PAS utiliser les pixels :

Tailles de police (utilisez rem à la place)
Espacements et rembourrage (utilisez rem ou em à la place)
Largeurs de mise en page (utilisez des pourcentages, fr ou des unités viewport)
Tout ce qui doit répondre aux préférences de taille de police de l'utilisateur

Autres unités absolues

Unité	Description	Équivalent	Cas d'utilisation
`px`	Pixels	1px	Éléments d'écran
`cm`	Centimètres	37,8px	Feuilles de style d'impression
`mm`	Millimètres	3,78px	Feuilles de style d'impression
`in`	Pouces	96px	Feuilles de style d'impression
`pt`	Points	1,33px (1/72 de pouce)	Feuilles de style d'impression
`pc`	Picas	16px (1/6 de pouce)	Feuilles de style d'impression

Remarque : Les unités physiques (cm, mm, in, pt, pc) n'ont de sens que dans les feuilles de style d'impression. Sur les écrans, elles sont simplement converties en pixels en utilisant le rapport 96 DPI standard.

/* Feuille de style d'impression utilisant des unités physiques */
@media print {
  body {
    font-size: 12pt;
    margin: 1in;
  }

  h1 {
    font-size: 18pt;
    margin-bottom: 0.5cm;
  }
}

Unités relatives : Basées sur la police

Les unités relatives sont calculées sur la base d'une autre valeur -- la taille de police de l'élément parent, la taille de police racine ou les dimensions du viewport. Elles sont essentielles pour le design responsive.

rem (em racine)

rem signifie "root em" et est relatif à la taille de police de l'élément racine (<html>). Par défaut, les navigateurs définissent la taille de police racine à 16px, donc 1rem = 16px.

html {
  font-size: 16px; /* C'est la valeur par défaut du navigateur */
}

h1 {
  font-size: 2rem;    /* 32px */
  margin-bottom: 1rem; /* 16px */
}

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

.card {
  padding: 1.5rem;     /* 24px */
  border-radius: 0.5rem; /* 8px */
}

Pourquoi rem est la meilleure unité pour la plupart des cas :

Respecte les préférences de l'utilisateur : Si un utilisateur définit la taille de police de son navigateur à 20px (pour l'accessibilité), toutes les valeurs basées sur rem s'adaptent proportionnellement
Cohérent : Contrairement à em, rem référence toujours la racine, donc il n'y a pas d'effet composé
Prévisible : Facile à calculer -- si la racine est 16px, 1.5rem est toujours 24px

L'astuce des 62,5 % (à utiliser avec prudence) :

/* Rend les calculs rem plus simples : 1rem = 10px */
html {
  font-size: 62.5%; /* 62,5% de 16px = 10px */
}

body {
  font-size: 1.6rem; /* Retour à l'équivalent 16px */
}

h1 {
  font-size: 3.2rem; /* 32px */
}

.spacing {
  padding: 2.4rem;   /* 24px */
}

Cette technique facilite les calculs mais peut causer des problèmes avec des composants tiers qui supposent la taille de police racine par défaut. À utiliser avec précaution.

em (Relatif au parent)

em est relatif à la taille de police de l'élément lui-même (pour les propriétés liées à la police) ou à l'élément parent (pour les autres propriétés). Cela le rend utile pour la mise à l'échelle au niveau des composants, mais il peut être délicat en raison des effets composés.

.parent {
  font-size: 18px;
}

.child {
  font-size: 1.2em;  /* 18px * 1.2 = 21.6px */
  padding: 1em;      /* 21.6px (relatif à sa propre taille de police) */
}

.grandchild {
  font-size: 1.2em;  /* 21.6px * 1.2 = 25.92px -- composition ! */
}

Le problème de composition :

/* Chaque niveau imbriqué devient plus grand */
ul { font-size: 1.1em; }

/*
  Niveau 1: 16px * 1.1 = 17,6px
  Niveau 2: 17,6px * 1.1 = 19,36px
  Niveau 3: 19,36px * 1.1 = 21,3px
  Niveau 4: 21,3px * 1.1 = 23,4px
  -- Le texte continue de grandir avec l'imbrication !
*/

Quand em est vraiment utile :

em brille quand vous souhaitez que les espacements s'adaptent à la taille de police propre de l'élément. C'est particulièrement utile pour les boutons et les composants en ligne :

/* Bouton qui s'adapte proportionnellement */
.button {
  font-size: 1rem;       /* Taille de base depuis la racine */
  padding: 0.5em 1em;    /* S'adapte avec font-size */
  border-radius: 0.25em; /* S'adapte avec font-size */
}

.button--large {
  font-size: 1.25rem;    /* Tout le reste s'adapte automatiquement */
}

.button--small {
  font-size: 0.875rem;   /* Le padding et le rayon se réduisent aussi */
}

Comparaison : rem vs. em

Aspect	rem	em
Référence	Taille de police de l'élément racine	Taille de police du parent/soi-même
Composition	Non	Oui
Prévisibilité	Haute	Plus faible (dépend du contexte)
Idéal pour	Tailles de police, espacements, mise en page	Mise à l'échelle proportionnelle au niveau des composants
Accessibilité	Respecte les paramètres de police racine	Respecte la taille de police du parent

ch (Largeur de caractère)

ch est égal à la largeur du caractère "0" (zéro) dans la police actuelle. Utile pour contraindre la largeur du texte à une longueur de ligne lisible.

/* Largeur de lecture optimale */
.article-content {
  max-width: 65ch;  /* Environ 65 caractères par ligne */
  margin: 0 auto;
}

/* Champ de saisie dimensionné pour le contenu attendu */
.zip-code-input {
  width: 6ch;  /* Assez large pour 5 chiffres + un peu de marge */
}

.phone-input {
  width: 15ch;
}

Pourquoi ch est important pour la lisibilité : La recherche suggère que la longueur de ligne optimale pour la lecture est de 45 à 75 caractères. Utiliser des unités ch facilite l'application de cette règle quelle que soit la taille de police.

ex (Hauteur x)

ex est égal à la hauteur du caractère minuscule "x" dans la police actuelle. Rarement utilisé directement, mais peut être utile pour un alignement vertical précis.

/* Centrer verticalement une icône avec du texte */
.icon-inline {
  height: 1ex;
  vertical-align: middle;
}

lh et rlh (Unités de hauteur de ligne)

lh est égal à la line-height calculée de l'élément, tandis que rlh est égal à la hauteur de ligne de l'élément racine.

/* Espacer les éléments par multiples de hauteur de ligne */
.paragraph {
  margin-bottom: 1lh; /* Un espacement de ligne */
}

.section {
  margin-bottom: 2rlh; /* Deux hauteurs de ligne racine */
}

cap, ic et autres unités avancées

Unité	Description	Cas d'utilisation
`cap`	Hauteur des lettres majuscules	Alignement avec le texte en majuscules
`ic`	Largeur de l'idéogramme CJK "eau"	Typographie CJK
`lh`	Hauteur de ligne de l'élément	Rythme vertical
`rlh`	Hauteur de ligne racine	Espacement vertical cohérent

Unités Viewport

Les unités viewport sont relatives au viewport du navigateur (la zone visible de la page web).

vw et vh (Largeur et hauteur du viewport)

/* Section hero plein écran */
.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Typographie responsive */
h1 {
  font-size: 5vw; /* S'adapte avec la largeur du viewport */
}

Important : 100vh sur les navigateurs mobiles ne tient pas compte de la barre d'adresse et de la navigation du navigateur. Cela a conduit à la création de nouvelles unités viewport.

Le problème du viewport mobile

Sur les navigateurs mobiles, la hauteur du viewport change lorsque la barre d'adresse s'affiche et se masque pendant le défilement. L'ancienne unité vh est basée sur le plus grand viewport possible (barre d'adresse masquée), ce qui provoque l'écrêtage du contenu lorsque la barre d'adresse est visible.

dvh, svh, lvh (Hauteur de viewport dynamique, petite et grande)

CSS fournit maintenant trois variantes pour gérer le viewport mobile :

/* svh: Petite hauteur de viewport (barre d'adresse visible) */
.safe-full-height {
  height: 100svh; /* Ne se coupe jamais derrière la barre d'adresse */
}

/* lvh: Grande hauteur de viewport (barre d'adresse masquée) */
.max-full-height {
  height: 100lvh; /* Hauteur maximale quand la barre est masquée */
}

/* dvh: Hauteur de viewport dynamique (change avec la barre) */
.dynamic-full-height {
  height: 100dvh; /* S'ajuste en temps réel */
}

Laquelle utiliser :

svh : Valeur par défaut sûre -- le contenu est toujours entièrement visible
lvh : Quand vous voulez la hauteur maximale possible
dvh : Quand vous voulez que la hauteur s'anime avec la barre d'adresse

La même logique s'applique aux unités de largeur : svw, lvw, dvw.

vi et vb (Viewport en ligne et en bloc)

Ces unités tiennent compte du mode d'écriture :

vi = taille du viewport dans la direction inline (largeur pour le texte horizontal, hauteur pour le texte vertical)
vb = taille du viewport dans la direction de bloc (hauteur pour le texte horizontal, largeur pour le texte vertical)

/* Mise en page tenant compte du mode d'écriture */
.container {
  max-inline-size: 90vi;   /* 90% du viewport en direction inline */
  margin-block: 5vb;        /* 5% du viewport en direction de bloc */
}

vmin et vmax

vmin = le plus petit de vw et vh
vmax = le plus grand de vw et vh

/* Élément carré qui tient dans n'importe quel viewport */
.square {
  width: 50vmin;
  height: 50vmin;
}

/* Typographie qui s'adapte bien dans les deux orientations */
h1 {
  font-size: 8vmin; /* Fonctionne en portrait et en paysage */
}

Comparaison des unités viewport

Unité	Description	Barre d'adresse mobile
`vw`	1% de la largeur du viewport	Non affectée
`vh`	1% de la hauteur du viewport	Utilise le grand viewport
`svh`	1% de la petite hauteur du viewport	Toujours sûre
`lvh`	1% de la grande hauteur du viewport	Hauteur maximale
`dvh`	1% de la hauteur dynamique du viewport	S'anime avec la barre
`vmin`	Plus petit de vw/vh	Hérite de vh
`vmax`	Plus grand de vw/vh	Hérite de vh

Pourcentage (%)

Les pourcentages sont relatifs à la propriété correspondante de l'élément parent. La référence change selon la propriété que vous définissez.

.parent {
  width: 800px;
  font-size: 20px;
  line-height: 1.5;
}

.child {
  width: 50%;        /* 400px (50% de la largeur du parent) */
  margin-left: 10%;  /* 80px (10% de la largeur du parent) */
  font-size: 80%;    /* 16px (80% de la taille de police du parent) */
  padding: 5%;       /* 40px (5% de la LARGEUR du parent, pas la hauteur !) */
}

Piège important : Les pourcentages de padding et de margin verticaux sont calculés sur la base de la largeur du parent, pas sa hauteur. C'est utile pour créer des boîtes avec rapport d'aspect (bien que la propriété aspect-ratio soit maintenant préférée).

/* Vieille astuce de rapport d'aspect utilisant le padding en pourcentage */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Rapport d'aspect 16:9 */
}

/* Approche moderne */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Unités de requête de conteneur

Les unités de requête de conteneur sont relatives à la taille d'un conteneur de requête, permettant un design responsive vraiment basé sur les composants.

cqw, cqh, cqi, cqb, cqmin, cqmax

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card-title {
  font-size: clamp(1rem, 4cqi, 2rem); /* S'adapte avec la taille inline du conteneur */
}

.card-description {
  font-size: clamp(0.875rem, 3cqi, 1.125rem);
}

Unité	Description
`cqw`	1% de la largeur du conteneur
`cqh`	1% de la hauteur du conteneur
`cqi`	1% de la taille inline du conteneur
`cqb`	1% de la taille de bloc du conteneur
`cqmin`	Plus petit de cqi et cqb
`cqmax`	Plus grand de cqi et cqb

L'unité fr (Fraction)

L'unité fr est utilisée exclusivement dans CSS Grid pour distribuer l'espace disponible proportionnellement.

.grid {
  display: grid;

  /* Trois colonnes : 1 part, 2 parts, 1 part */
  grid-template-columns: 1fr 2fr 1fr;
  /* Avec un conteneur de 1200px : 300px, 600px, 300px */

  /* Unités mixtes : barre latérale fixe, contenu flexible */
  grid-template-columns: 250px 1fr;

  /* Plusieurs lignes */
  grid-template-rows: auto 1fr auto;
  /* En-tête, zone de contenu flexible, pied de page */

  gap: 1rem;
}

/* Grille responsive avec des unités fr */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

fr vs pourcentages dans Grid :

/* Ces deux approches semblent similaires mais se comportent différemment */
.grid-percent {
  grid-template-columns: 25% 50% 25%;
  gap: 1rem;
  /* Colonnes + espaces > 100%, provoquant un débordement ! */
}

.grid-fr {
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  /* Les unités fr tiennent compte automatiquement de l'espace */
}

Fonctions CSS avec des unités

clamp() - Valeurs responsive avec contraintes

clamp() est l'une des fonctions CSS les plus puissantes pour le design responsive. Elle prend trois valeurs : minimum, préféré et maximum.

/* Taille de police responsive qui ne devient jamais trop petite ou trop grande */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Minimum : 1.5rem (24px)
     Préféré : 4vw (s'adapte au viewport)
     Maximum : 3rem (48px) */
}

/* Largeur de conteneur responsive */
.container {
  width: clamp(320px, 90%, 1200px);
}

/* Espacement responsive */
section {
  padding: clamp(1rem, 5vw, 4rem);
}

min() et max()

/* La largeur est le plus petit de 90% ou 1200px */
.container {
  width: min(90%, 1200px);
}

/* Au moins 300px de large, mais peut grandir */
.sidebar {
  width: max(300px, 25%);
}

/* Combiner pour des valeurs responsive complexes */
.card {
  width: min(100% - 2rem, 600px);
  padding: max(1rem, 2vw);
}

calc() - Arithmétique avec des unités

calc() vous permet de mélanger différentes unités dans des calculs :

.sidebar-layout {
  /* Largeur totale moins la barre latérale */
  .main-content {
    width: calc(100% - 280px);
  }

  /* Centré avec max-width et marges automatiques */
  .content {
    width: calc(100% - 2 * 1.5rem);
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Typographie fluide avec calc */
h1 {
  /* Taille de base + facteur de mise à l'échelle */
  font-size: calc(1.5rem + 1.5vw);
}

/* Espacement basé sur le viewport avec minimum */
.hero {
  padding-top: calc(2rem + 5vh);
  padding-bottom: calc(2rem + 5vh);
}

Recommandations pratiques : Quelle unité pour quelle situation ?

Tailles de police

/* Taille de police racine : utiliser pourcentage ou px */
html {
  font-size: 100%; /* Respecte les paramètres du navigateur de l'utilisateur */
}

/* Toutes les autres tailles de police : utiliser rem */
body { font-size: 1rem; }       /* 16px */
h1 { font-size: 2.5rem; }      /* 40px */
h2 { font-size: 2rem; }        /* 32px */
h3 { font-size: 1.5rem; }      /* 24px */
small { font-size: 0.875rem; } /* 14px */

/* Tailles de police responsives : utiliser clamp avec rem et vw */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Espacement (Padding, Margin, Gap)

/* Utiliser rem pour un espacement cohérent */
.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.grid {
  gap: 1.5rem;
}

/* Utiliser em pour l'espacement qui doit s'adapter à la taille de police */
.button {
  padding: 0.5em 1em;
}

Largeurs de mise en page

/* Utiliser pourcentage, fr ou unités viewport */
.container {
  width: min(90%, 1200px);
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Sections pleine largeur */
.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Bordures et ombres

/* Utiliser px pour les détails visuels fins */
.card {
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem; /* rem pour border-radius est aussi OK */
}

Media Queries

/* Utiliser px ou em pour les points de rupture */
@media (min-width: 768px) {
  /* Tablette et plus */
}

@media (min-width: 1024px) {
  /* Bureau et plus */
}

/* Les points de rupture en em respectent le zoom de l'utilisateur */
@media (min-width: 48em) {
  /* 48em = 768px à la taille de police par défaut */
}

Tableau complet des recommandations

Cas d'utilisation	Unité recommandée	Raisonnement
Tailles de police	`rem`	Respecte les préférences, pas de composition
Tailles de police responsives	`clamp(rem, vw, rem)`	S'adapte en douceur avec des contraintes
Espacement (padding, margin)	`rem`	Cohérent, s'adapte avec la police racine
Padding des boutons	`em`	S'adapte avec la taille de police du bouton
Largeurs de conteneur	`%`, `min()`, `clamp()`	Flexible et responsive
Colonnes de grille	`fr`	Distribue l'espace proportionnellement
Longueur de ligne	`ch`	Optimise la lisibilité
Bordures	`px`	Détails fins, ne doivent pas s'adapter
Ombres	`px`	Détails fins, apparence cohérente
Sections plein écran	`dvh`	Tient compte de la barre d'adresse mobile
Points de rupture media queries	`px` ou `em`	Points de déclenchement cohérents
Border-radius	`rem` ou `px`	Les deux fonctionnent ; `rem` s'adapte légèrement

Accessibilité et unités CSS

Le choix des bonnes unités CSS est directement lié à l'accessibilité.

Respecter les paramètres de taille de police de l'utilisateur

Les utilisateurs peuvent augmenter la taille de police par défaut de leur navigateur pour améliorer la lisibilité. Utiliser rem pour les tailles de police et les espacements respecte cette préférence :

/* Bien : S'adapte aux préférences de taille de police de l'utilisateur */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
.container { padding: 1.5rem; }

/* Mal : Ignore les préférences de l'utilisateur */
body { font-size: 16px; }
h1 { font-size: 40px; }
.container { padding: 24px; }

Support du zoom

Les utilisateurs doivent pouvoir zoomer à 200% sans défilement horizontal (critère de succès WCAG 2.1 1.4.10) :

/* Bien : Responsive à tout niveau de zoom */
.content {
  max-width: min(90%, 65ch);
  margin: 0 auto;
  padding: 1.5rem;
}

/* Mal : La largeur fixe se casse avec un zoom élevé */
.content {
  width: 960px;
  margin: 0 auto;
  padding: 24px;
}

Cibles tactiles

Les éléments interactifs doivent faire au moins 44x44 pixels CSS (WCAG 2.5.5) :

.button {
  min-height: 2.75rem; /* 44px */
  min-width: 2.75rem;
  padding: 0.75rem 1.5rem;
}

/* Assurer un espacement adéquat entre les cibles tactiles */
.nav-list li + li {
  margin-top: 0.5rem;
}

Erreurs courantes et comment les éviter

Erreur 1 : Utiliser px pour les tailles de police

/* Mal : Ne s'adapte pas aux préférences de l'utilisateur */
body { font-size: 16px; }
h1 { font-size: 32px; }

/* Bien : S'adapte aux préférences de l'utilisateur */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

Erreur 2 : Utiliser vh pour les mises en page mobiles pleine hauteur

/* Mal : Se coupe derrière la barre d'adresse mobile */
.mobile-layout { height: 100vh; }

/* Bien : Tient compte de la barre d'adresse mobile */
.mobile-layout { height: 100dvh; }

/* Le plus sûr : Repli pour les anciens navigateurs */
.mobile-layout {
  height: 100vh;
  height: 100dvh;
}

Erreur 3 : Composition des valeurs em

/* Mal : La taille de police grossit avec l'imbrication */
li { font-size: 1.1em; }

/* Bien : Cohérent quelle que soit l'imbrication */
li { font-size: 1.1rem; }

Erreur 4 : Utiliser vw pour les tailles de police sans contraintes

/* Mal : Trop petit sur mobile, trop grand sur bureau */
h1 { font-size: 5vw; }

/* Bien : Contraint avec clamp */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

Erreur 5 : Confusion avec le padding en pourcentage

/* Surprise : Le padding vertical est basé sur la LARGEUR */
.box {
  padding-top: 10%;    /* 10% de la LARGEUR du parent, pas la hauteur */
  padding-bottom: 10%; /* Pareil -- basé sur la LARGEUR */
}

Unités CSS dans les frameworks modernes

Tailwind CSS

Tailwind utilise une échelle d'espacement basée sur rem :

{/*  Espacement Tailwind : 1 unité = 0,25rem = 4px */}
<div class="p-4 m-6 text-lg">
  {/*  p-4 = padding: 1rem (16px) */}
  {/*  m-6 = margin: 1.5rem (24px) */}
  {/*  text-lg = font-size: 1,125rem (18px) */}
</div>

Modules CSS / CSS-in-JS

// Styled Components / Emotion
const Card = styled.div`
  padding: 1.5rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  max-width: min(100%, 600px);
`;

Conclusion

Les unités CSS sont un sujet fondamental qui affecte tous les aspects du développement web -- la mise en page, la typographie, l'accessibilité et la réactivité. L'idée clé est qu'il n'existe pas de "meilleure" unité unique ; le bon choix dépend du contexte.

Points clés à retenir :

Utiliser rem par défaut pour les tailles de police, les espacements et la plupart des mesures
Utiliser px pour les détails fins comme les bordures, les ombres et les contours
Utiliser fr pour les mises en page Grid afin de distribuer l'espace proportionnellement
Utiliser dvh plutôt que vh pour les mises en page mobiles pleine hauteur
Utiliser ch pour les longueurs de ligne afin d'optimiser la lisibilité
Utiliser clamp() pour les valeurs responsives avec des contraintes minimales et maximales
Utiliser em avec parcimonie pour la mise à l'échelle proportionnelle des composants (comme le padding des boutons)
Toujours penser à l'accessibilité -- choisir des unités qui respectent les préférences des utilisateurs

Maîtriser les unités CSS demande de la pratique, mais les principes sont clairs : préférer les unités relatives aux unités absolues, réfléchir à la façon dont votre design répondra à différents contextes, et toujours considérer l'accessibilité.

Pour des conversions rapides d'unités dans votre workflow de développement, essayez notre outil Convertisseur d'unités. Vous pouvez également utiliser notre Sélecteur de couleurs pour les valeurs de couleur CSS et nos outils de développement CSS pour d'autres tâches de développement web.

Ressources connexes

Convertisseur d'unités -- Convertir entre différentes unités
Sélecteur de couleurs -- Choisir et convertir des couleurs CSS
Tendances du développement web 2026 -- CSS moderne et plus encore
Formateur JSON -- Formater les tokens de design et les configurations CSS
Testeur de regex -- Tester les modèles regex liés au CSS