Design flexible et media queries

Design flexible et media queries

On a vu comment composer le texte : taille, interlignage, mesure, hiérarchie. Mais cette composition doit tenir sur un téléphone de 320px de large, sur un écran de 1400px, et sur tout ce qui existe entre les deux.

C’est le problème que résout le design flexible — et les media queries sont l’un de ses outils principaux.

Les unités

Le premier geste du design flexible est de choisir les bonnes unités. Toutes les unités CSS ne se comportent pas de la même manière.

Unités fixes — ne changent pas selon le contexte :

Unités relatives — s’adaptent à leur contexte :

La règle pratique : tout ce qui peut être relatif, le sera. Un layout en % s’adapte naturellement à n’importe quelle largeur ; un layout en px cassera dès qu’on sort de la taille prévue.

La typographie fluide avec clamp()

Dans la continuité de la séance précédente : la fonction clamp() permet de définir une taille qui grandit avec la fenêtre, mais reste dans des limites raisonnables.

h1 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  /*         minimum  idéal  maximum  */
}

Ici, le titre aura au minimum 1.8rem, grandira fluidement jusqu’à 3.5rem au fur et à mesure que la fenêtre s’élargit, et ne dépassera jamais 3.5rem. Pas besoin de media query pour ça.

clamp() fonctionne pour font-size, padding, gap, margin — partout où on veut une valeur qui respire sans décrocher.

Chapitre 2

Les media queries

Une media query est une condition : si l’écran a telle ou telle propriété, applique ces styles. C’est le mécanisme qui permet d’écrire des règles CSS qui s’activent selon le contexte.

La syntaxe

Une media query s’écrit avec @media, suivie d’une condition entre parenthèses et d’un bloc de styles :

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

On peut combiner plusieurs conditions avec and :

@media (min-width: 600px) and (max-width: 1024px) {
  .sidebar {
    display: block;
  }
}

Les media queries peuvent aussi cibler le type de média : @media print { … } pour l’impression (que vous avez peut-être utilisé dans le CSS de l’exercice de balisage).

Développer pour des tailles d’écrans

Il existe deux manières d’organiser ses media queries :

Desktop-first : on écrit les styles pour grand écran, puis on réduit avec max-width.

/* styles par défaut : grand écran */
.nav { display: flex; gap: 2rem; }

@media (max-width: 600px) {
  .nav { flex-direction: column; }
}

Mobile-first : on écrit les styles de base pour petit écran, puis on augmente avec min-width.

/* styles par défaut : petit écran */
.nav { display: flex; flex-direction: column; }

@media (min-width: 600px) {
  .nav { flex-direction: row; gap: 2rem; }
}

Où placer les breakpoints ?

Un réflexe courant : copier les tailles des devices connus (iPhone = 375px, iPad = 768px, laptop = 1280px…). C’est une mauvaise approche — les tailles d’écran évoluent constamment et votre design ne devrait pas dépendre d’un catalogue d’appareils.

La bonne méthode : chercher les breakpoints là où le contenu commence à souffrir. Rétrécissez votre fenêtre de navigateur lentement. Quand la mise en page casse ou devient inconfortable à lire, c’est là qu’il faut un breakpoint.

En pratique, deux ou trois breakpoints suffisent dans la grande majorité des cas.

Boîte à outils

Propriétés et patterns essentiels

Unités à maîtriser

Propriétés de mise en page flexibles

Media queries à retenir