Design Responsive

Construire des pages qui s'adaptent du téléphone au desktop sans versions séparées.

Foundation 25 minutes Prérequis: Mise en page : Flexbox et Grid

Idées clés

Mobile-first : écrivez d'abord le CSS pour les petits écrans, puis ajoutez des media queries pour les plus larges.
Unités relatives : rem, %, vw/vh au lieu de pixels fixes.
Images fluides : max-width: 100%; height: auto.
Breakpoints : peu nombreux (par ex. 640, 1024, 1280) choisis par le contenu, pas par les appareils.

.card { padding: 12px; }
@media (min-width: 640px) {
  .card { padding: 24px; }
}