05 — Responsive Design (Mobile First)

Démo — Redimensionnez la fenêtre

Contenu principal

Ce bloc prend toute la largeur sur mobile, puis partage l'espace avec la sidebar sur tablette et desktop.

Base mobile (sans media query)

.container { width: 100%; padding: 15px; }

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.content { display: block; }
.sidebar { display: none; }

Tablette — min-width: 768px

@media (min-width: 768px) {
  .nav-menu { flex-direction: row; gap: 16px; }
  .content  { display: grid; grid-template-columns: 1fr 220px; gap: 20px; }
  .sidebar  { display: block; }
}

Desktop — min-width: 1024px

@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .content   { grid-template-columns: 1fr 280px; }
}