Responsive design : media queries, unités relatives

Adaptez vos interfaces à toutes les tailles d'écran avec l'approche mobile-first, les media queries et les unités rem, % et vw.

9 min · 3 questions

L'approche professionnelle est le mobile-first : vous écrivez d'abord les styles pour petit écran, puis vous enrichissez la mise en page à mesure que l'espace augmente, avec des media queries en min-width. Le CSS de base reste simple, et chaque palier (breakpoint) n'ajoute que ce qui change réellement.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Côté unités, bannissez les pixels pour la typographie. 1rem vaut la taille de police de l'élément racine (16px par défaut) et, surtout, respecte le réglage de taille de texte choisi par l'utilisateur dans son navigateur. Un utilisateur malvoyant qui règle sa police à 20px verra tout votre site s'adapter en proportion - à condition d'avoir utilisé des rem.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

Pour les largeurs, combinez les unités relatives : % pour occuper une part du parent, max-width pour plafonner sur grand écran, vw pour les tailles liées à la largeur de la fenêtre (1vw en vaut 1 %). La fonction clamp(min, ideal, max) crée des valeurs fluides qui s'adaptent sans aucune media query - parfaite pour les grands titres.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. En approche mobile-first, quelle media query utilisez-vous pour cibler les grands écrans ?
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. Par défaut, à quoi correspond 1rem ?
   • 10 pixels, une valeur fixe du standard CSS
   • La taille de police de l'élément parent
   • La taille de police de l'élément racine, soit 16px par défaut
3. Que vaut 50vw ?
   • 50 % de la largeur de la fenêtre d'affichage
   • 50 % de la largeur de l'élément parent
   • 50 pixels quelle que soit la fenêtre