Aller au contenu principal

Module CSS.6 – Responsive design

Objectif​

Maîtriser le responsive design : Media queries, approche mobile-first, breakpoints pour créer des sites qui s'adaptent à tous les écrans.

Théorie​

Qu'est-ce que le responsive design ?​

Responsive design = Site qui s'adapte à toutes les tailles d'écran (mobile, tablette, desktop).

Approches :

  • Mobile-first : Commencer par mobile, puis agrandir (recommandé)
  • Desktop-first : Commencer par desktop, puis réduire

Viewport​

Meta tag essentiel :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sans viewport : La page sera zoomée sur mobile (mauvaise UX).

Media queries​

Syntaxe :

@media (condition) {
    /* Styles appliqués si condition vraie */
}

Exemple :

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

Breakpoints courants​

Breakpoints standards :

/* Mobile */
@media (max-width: 575.98px) { }

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) { }

/* Desktop */
@media (min-width: 992px) { }

Breakpoints Bootstrap :

  • xs: < 576px (mobile)
  • sm: ≥ 576px (mobile large)
  • md: ≥ 768px (tablet)
  • lg: ≥ 992px (desktop)
  • xl: ≥ 1200px (desktop large)
  • xxl: ≥ 1400px (desktop très large)

Approche mobile-first​

Principe : Styles de base pour mobile, puis agrandir.

/* Styles de base (mobile) */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet et plus */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop et plus */
@media (min-width: 992px) {
    .container {
        width: 970px;
        padding: 30px;
    }
}

Avantages :

  • ✅ Performance (moins de CSS sur mobile)
  • ✅ Progressive enhancement
  • ✅ Meilleure UX mobile

Media queries avancées​

Plusieurs conditions :

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet uniquement */
}

Orientation :

@media (orientation: landscape) {
    /* Paysage */
}

@media (orientation: portrait) {
    /* Portrait */
}

Résolution :

@media (min-resolution: 2dppx) {
    /* Écrans Retina */
}

Print :

@media print {
    /* Styles pour impression */
    .no-print {
        display: none;
    }
}

Unités responsive​

Viewport units :

width: 100vw;    /* 100% de la largeur du viewport */
height: 100vh;   /* 100% de la hauteur du viewport */
font-size: 5vw;  /* Taille relative au viewport */

Rem (recommandé) :

html {
    font-size: 16px; /* Base */
}

@media (min-width: 768px) {
    html {
        font-size: 18px; /* Plus grand sur tablette */
    }
}

Images responsive​

Avec max-width :

img {
    max-width: 100%;
    height: auto;
}

Avec srcset (HTML) :

<img src="image-small.jpg"
     srcset="image-small.jpg 300w,
             image-medium.jpg 600w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     alt="Description">

Flexbox responsive​

Wrap automatique :

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 0 100%; /* Mobile : 100% */
}

@media (min-width: 768px) {
    .item {
        flex: 1 0 50%; /* Tablet : 50% */
    }
}

@media (min-width: 992px) {
    .item {
        flex: 1 0 33.333%; /* Desktop : 33% */
    }
}

Grid responsive​

Colonnes adaptatives :

.container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile : 1 colonne */
    gap: 20px;
}

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

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

Avec auto-fit :

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
/* Crée automatiquement le nombre de colonnes selon l'espace */

Menu hamburger :

/* Mobile : menu caché */
.menu {
    display: none;
}

.menu.active {
    display: block;
}

/* Desktop : menu visible */
@media (min-width: 992px) {
    .menu {
        display: flex;
    }
    
    .hamburger {
        display: none;
    }
}

Exercices guidés​

Exercice 1 : Media query de base​

Créez une page avec :

  • Styles de base (mobile)
  • Media query pour tablette (≥768px)
  • Media query pour desktop (≥992px)

Exercice 2 : Mobile-first​

Refactorisez votre CSS :

  • Styles de base pour mobile
  • Agrandir avec min-width
  • Testez sur différentes tailles

Exercice 3 : Images responsive​

Créez des images :

  • max-width: 100%
  • Testez avec srcset (si possible)
  • Vérifiez sur mobile

Exercice 4 : Layout responsive​

Créez un layout :

  • 1 colonne sur mobile
  • 2 colonnes sur tablette
  • 3 colonnes sur desktop
  • Utilisez Flexbox ou Grid

Exercice 5 : Navigation responsive​

Créez un menu :

  • Hamburger sur mobile
  • Menu horizontal sur desktop
  • Testez le toggle

❌ Erreurs fréquentes​

Erreur 1 : Oublier le viewport​

❌ Mauvais :

<!-- Pas de viewport -->
<head>
    <title>Site</title>
</head>

✅ Bon :

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site</title>
</head>

Pourquoi : Sans viewport, la page est zoomée sur mobile.

Erreur 2 : Desktop-first au lieu de mobile-first​

❌ Mauvais :

.container {
    width: 1200px; /* Desktop */
}

@media (max-width: 768px) {
    .container {
        width: 100%; /* Mobile */
    }
}

✅ Bon :

.container {
    width: 100%; /* Mobile */
}

@media (min-width: 992px) {
    .container {
        width: 1200px; /* Desktop */
    }
}

Pourquoi : Mobile-first = meilleure performance.

Erreur 3 : Images non responsive​

❌ Mauvais :

img {
    width: 800px; /* Fixe */
}

✅ Bon :

img {
    max-width: 100%;
    height: auto;
}

Pourquoi : Images qui débordent sur mobile.

Erreur 4 : Breakpoints arbitraires​

❌ Mauvais :

@media (max-width: 743px) { }
@media (max-width: 1024px) { }

✅ Bon :

@media (max-width: 575.98px) { } /* Mobile */
@media (min-width: 768px) { }    /* Tablet */
@media (min-width: 992px) { }    /* Desktop */

Pourquoi : Breakpoints standards = cohérence.

Erreur 5 : Pas de test sur mobile​

❌ Mauvais :

  • Tester seulement sur desktop

✅ Bon :

  • Tester sur mobile (DevTools)
  • Tester sur vraies tailles d'écran
  • Tester en portrait et paysage

Pourquoi : Le responsive doit être testé réellement.

🚀 Mini-projet​

Mission : Créer un site responsive complet

Créez un site avec :

Mobile-first :

  • Styles de base pour mobile
  • Media queries avec min-width
  • Breakpoints standards

Layout responsive :

  • 1 colonne → 2 colonnes → 3 colonnes
  • Navigation hamburger → menu horizontal
  • Images responsive

Tests :

  • DevTools (mobile, tablette, desktop)
  • Vérifier toutes les tailles
  • Tester l'orientation

Critères :

  • ✅ Mobile-first
  • ✅ Viewport correct
  • ✅ Breakpoints standards
  • ✅ Images responsive
  • ✅ Navigation responsive
  • ✅ Testé sur toutes les tailles

Objectif : Créer un site qui s'adapte parfaitement à tous les écrans.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez le responsive design et avez créé un site qui s'adapte à toutes les tailles d'écran.