Responsive Web Design : Guide Complet pour des Sites Adaptés à Tous les Écrans

/* Styles mobile par défaut (tout écran) */
.layout {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}

.sidebar { display: none; } /* Caché sur mobile */
.content { width: 100%; }

/* Tablette : 768px et + */
@media (min-width: 768px) {
.layout {
  flex-direction: row;
  padding: 2rem;
}
.sidebar {
  display: block;
  width: 250px;
}
.content { flex: 1; }
}

/* Desktop : 1024px et + */
@media (min-width: 1024px) {
.layout {
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}
}

/* Définir le conteneur */
.card-grid {
container-type: inline-size;
container-name: grid;
}

/* Styles qui dépendent de la largeur DU CONTENEUR, pas du viewport */
@container grid (min-width: 400px) {
.card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
}
}

@container grid (min-width: 600px) {
.card {
  grid-template-columns: 200px 1fr auto;
}
.card-actions {
  display: flex;
  flex-direction: column;
}
}

/* Grille qui crée automatiquement des colonnes */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}

/* Sans media query : 
 - Écran < 600px : 1 colonne
 - 600-900px : 2 colonnes  
 - 900-1200px : 3 colonnes
 - 1200px+ : 4 colonnes max
*/

/* Flexbox fluide pour les layouts plus simples */
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.nav-links a {
flex: 1 1 auto; /* grandit/rétrécit */
min-width: 120px; /* ne descend jamais sous 120px */
text-align: center;
}

/* Taille fluide : 1rem sur mobile → 2.5rem sur desktop */
h1 {
font-size: clamp(1.5rem, 3vw + 1rem, 3.5rem);
line-height: 1.1;
}

/* Échelle typographique complète */
:root {
--text-sm: clamp(0.8rem, 1vw + 0.5rem, 0.9rem);
--text-base: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
--text-lg: clamp(1.125rem, 2vw + 0.5rem, 1.375rem);
--text-xl: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem);
--text-2xl: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}

/* Pas de media query nécessaire */
body { font-size: var(--text-base); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }

<!-- Descripteur w : le navigateur choisit la meilleure largeur -->
<img src="photo-800.webp"
    srcset="photo-400.webp 400w,
            photo-800.webp 800w,
            photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 80vw,
            1200px"
    alt="Description" />

<!-- Art direction : image différente sur mobile -->
<picture>
  <source media="(max-width: 480px)" srcset="hero-mobile.webp" />
  <source media="(max-width: 900px)" srcset="hero-tablet.webp" />
  <img src="hero-desktop.webp" alt="Hero responsive" />
</picture>

<nav aria-label="Navigation principale">
<!-- Bouton hamburger visible uniquement sur mobile -->
<button aria-expanded="false" aria-controls="menu" 
        class="nav-toggle md:hidden">
  <span class="sr-only">Menu</span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<!-- Menu : caché sur mobile, visible sur desktop -->
<ul id="menu" class="nav-links hidden md:flex">
  <li><a href="/">Accueil</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
</nav>

<script>
// Toggle du menu mobile avec gestion aria
document.querySelector('.nav-toggle')
  .addEventListener('click', function() {
    const expanded = this.getAttribute('aria-expanded') === 'true'
    this.setAttribute('aria-expanded', !expanded)
    document.getElementById('menu').classList.toggle('hidden')
  })
</script>