Le responsive design : une obligation en 2024

Plus de 60% du trafic web vient du mobile. Un site non responsive perd des visiteurs et est pénalisé par Google. Les media queries CSS permettent d’adapter votre mise en page à chaque taille d’écran.

La balise viewport : le prérequis

<!-- OBLIGATOIRE dans le <head> de chaque page HTML -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Sans cette balise, votre site s'affiche en version desktop miniaturisée sur mobile -->

Syntaxe des media queries

/* Styles pour les écrans de 768px et moins (tablettes et mobiles) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    h1 {
        font-size: 24px;
    }
}

/* Styles pour les mobiles uniquement */
@media (max-width: 480px) {
    .nav-links { display: none; }
    .hamburger { display: block; }
}

/* Styles pour les grands écrans */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

Approche Mobile First (recommandée)

/* 1. Styles de base = mobile (pas de media query) */
.grille {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}

.carte {
    width: 100%;
}

/* 2. Tablette : min-width 768px */
@media (min-width: 768px) {
    .grille {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .carte {
        width: calc(50% - 10px); /* 2 colonnes */
    }
}

/* 3. Desktop : min-width 1024px */
@media (min-width: 1024px) {
    .grille {
        max-width: 1200px;
        margin: 0 auto;
    }
    .carte {
        width: calc(33.33% - 15px); /* 3 colonnes */
    }
}

💡 Mobile First vs Desktop First

Mobile First	Desktop First
Styles de base = mobile	Styles de base = desktop
`@media (min-width)`	`@media (max-width)`
✅ Recommandé par Google	Plus intuitif au début

Breakpoints standard

/* Les breakpoints les plus courants */
/* Mobile :     < 576px  (par défaut en mobile first) */
/* Mobile L :   ≥ 576px  */
/* Tablette :   ≥ 768px  */
/* Laptop :     ≥ 992px  */
/* Desktop :    ≥ 1200px */
/* Grand écran: ≥ 1400px */

@media (min-width: 576px)  { /* Mobile large */ }
@media (min-width: 768px)  { /* Tablette */ }
@media (min-width: 992px)  { /* Laptop */ }
@media (min-width: 1200px) { /* Desktop */ }

Patterns responsives courants

Navigation : horizontal → hamburger

/* Mobile : menu caché */
.nav-links {
    display: none;
}
.hamburger {
    display: block;
}

/* Desktop : menu visible */
@media (min-width: 768px) {
    .nav-links {
        display: flex;
        gap: 20px;
    }
    .hamburger {
        display: none;
    }
}

Grille : 1 → 2 → 3 colonnes

/* Alternative avec CSS Grid (plus simple) */
.grille {
    display: grid;
    grid-template-columns: 1fr;  /* 1 colonne mobile */
    gap: 20px;
}

@media (min-width: 768px) {
    .grille { grid-template-columns: repeat(2, 1fr); }  /* 2 colonnes */
}

@media (min-width: 1024px) {
    .grille { grid-template-columns: repeat(3, 1fr); }  /* 3 colonnes */
}

Texte responsive

h1 { font-size: 24px; }

@media (min-width: 768px) { h1 { font-size: 36px; } }
@media (min-width: 1024px) { h1 { font-size: 48px; } }

/* Ou avec clamp() (pas besoin de media query !) */
h1 {
    font-size: clamp(24px, 5vw, 48px);
    /* Minimum 24px, idéal 5% de la largeur, maximum 48px */
}

Images responsive

/* Toutes les images s'adaptent à leur conteneur */
img {
    max-width: 100%;
    height: auto;
}

/* Image de fond responsive */
.hero {
    background-image: url('hero-mobile.jpg');
    background-size: cover;
}

@media (min-width: 768px) {
    .hero { background-image: url('hero-desktop.jpg'); }
}

Tester le responsive

Ouvrez votre site dans Chrome
Appuyez sur F12 (DevTools)
Cliquez sur l'icône 📱 mobile (ou Ctrl+Shift+M)
Testez différents appareils : iPhone SE, iPad, Galaxy S20
Redimensionnez manuellement pour voir les breakpoints

Erreurs courantes à éviter

❌ Oublier la balise <meta viewport>
❌ Utiliser des largeurs fixes (width: 800px) au lieu de max-width ou %
❌ Texte trop petit sur mobile (minimum 16px pour le corps de texte)
❌ Boutons trop petits pour les doigts (minimum 44x44px)
❌ Contenu qui dépasse horizontalement (scroll horizontal = mauvais UX)

Exercice pratique

🎯 Défi : Page responsive Mobile First

Créez une page avec header, section héro, grille de 6 cartes, et footer
Mobile : 1 colonne, menu hamburger, texte 16px
Tablette : 2 colonnes, menu visible, texte 18px
Desktop : 3 colonnes, max-width 1200px centré, texte 20px
Testez avec les DevTools sur 5 tailles d'écran différentes

Comment rendre votre site responsive avec les media queries