Développement Web

Comment rendre votre site responsive avec les media queries

11 min de lecture

Prérequis

  • Niveau : bases HTML/CSS, idéalement avoir vu Flexbox ou Grid.
  • Outils : VS Code + un navigateur moderne (Chrome ou Firefox) avec leurs DevTools mobile.
  • Lecture utile : Flexbox et CSS Grid.
  • Temps estimé : 30 à 45 minutes.

Pourquoi le responsive ?

En 2026 (informations vérifiées en avril 2026, susceptibles d’évoluer), plus de 60 % du trafic web mondial vient du mobile (StatCounter). Google indexe en priorité la version mobile (mobile-first indexing). Un site non responsive perd des visiteurs et du référencement. Les media queries CSS sont l’outil natif pour adapter votre mise en page à chaque taille d’écran.

Le responsive design : une obligation en 2026

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

  1. Ouvrez votre site dans Chrome
  2. Appuyez sur F12 (DevTools)
  3. Cliquez sur l'icône 📱 mobile (ou Ctrl+Shift+M)
  4. Testez différents appareils : iPhone SE, iPad, Galaxy S20
  5. 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

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

Container queries : la révolution CSS 2023-2026

Les media queries classiques se basent sur la taille du viewport, c'est-à-dire la fenêtre du navigateur. Cette approche fonctionne pour les pages simples mais devient limitée pour les composants réutilisés dans plusieurs contextes (sidebar, modal, grid). En 2023, tous les navigateurs modernes ont stabilisé les container queries, qui adaptent un composant en fonction de la taille de son parent, pas du viewport. C'est une bascule majeure pour les architectures component-driven (React, Vue, Web Components).

/* Le parent doit être déclaré comme container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* La carte adapte sa mise en page selon son conteneur */
@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

L'avantage est concret : une carte produit dans une sidebar étroite affiche en colonne, alors que la même carte dans une grille large s'affiche en deux colonnes. Plus besoin de classes différentes selon l'emplacement — le composant s'adapte tout seul à son contexte. Pour une équipe qui maintient un design system, container queries simplifient radicalement la maintenance.

Mobile first vs desktop first : quelle approche choisir

L'approche mobile first est devenue le standard depuis 2014-2015 et reste la recommandation 2026 pour la quasi-totalité des projets. Le principe : écrire les styles pour mobile en CSS de base, puis ajouter des media queries min-width pour les écrans plus larges. Cette approche force à se concentrer sur l'essentiel (le mobile contraint), puis enrichit progressivement pour les écrans plus larges. Le code généré est plus léger et la maintenance plus simple.

L'approche desktop first reste pertinente dans deux cas. Premier cas : adaptation d'un site existant majoritairement desktop sans budget pour une refonte complète. Deuxième cas : applications métier B2B où l'usage mobile est marginal (CRM interne, ERP de comptabilité, dashboard d'analytics). En dehors de ces deux cas, mobile first reste le choix par défaut, particulièrement en Afrique de l'Ouest où plus de 80 % du trafic web vient de smartphones selon les statistiques 2025-2026 de la BCEAO et des opérateurs locaux.

Tester son site responsive : outils et patterns 2026

Tester sur le DevTools de Chrome reste utile mais ne remplace pas un test sur appareil réel. Trois outils complémentaires sont à connaître. Premier outil : Browserstack ou LambdaTest qui exposent des centaines de combinaisons device/navigateur/OS pour tester sans posséder physiquement les appareils. La version gratuite de Browserstack permet 100 minutes/mois — suffisant pour les tests ponctuels.

Deuxième outil : Lighthouse intégré dans Chrome DevTools qui simule une connexion 4G dégradée et un CPU mobile bas de gamme pour mesurer les performances dans un contexte représentatif. Pour une PME qui cible des utilisateurs ouest-africains, simuler "Slow 4G" + "4x slowdown CPU" donne un baseline réaliste de l'expérience perçue. Troisième outil : tester physiquement sur un Android d'entrée de gamme (200 EUR neuf) avec une connexion 4G locale dégradée. C'est le contexte réel d'usage de la majorité de vos visiteurs locaux et c'est le seul vrai juge de votre travail responsive.

Adaptation au contexte ouest-africain

Le marché ouest-africain est particulièrement smartphone-first. Les statistiques BCEAO et opérateurs (Sonatel, Orange CI, Wave) montrent que 80 à 90 % du trafic e-commerce et bancaire vient de smartphones, principalement sur Android d'entrée et milieu de gamme. La majorité des écrans visitant un site PME sénégalais ou ivoirien font entre 360 et 414 px de large, avec une densité d'écran moyenne et une connexion 4G qui oscille entre 5 et 30 Mbps.

Trois conséquences pratiques. Premièrement, optimiser le mobile en priorité absolue — un site qui plante sur Android Galaxy A03 perdra la majorité de ses prospects locaux. Deuxièmement, alléger les images via srcset et formats modernes (WebP, AVIF) — un slider fullwidth de 2 MB est ruineux en data 4G. Troisièmement, tester en conditions réelles plutôt que sur DevTools — les vraies connexions ouest-africaines varient énormément entre Dakar centre-ville et zones rurales.

Pour le maillage avec les autres tutoriels frontend, voir le guide Bootstrap 5 responsive qui couvre la grille et les breakpoints standards en 2026.

Breakpoints standards 2026 et leur logique

Choisir des breakpoints reste un arbitrage. Quatre valeurs de référence dominent en 2026, alignées sur les principaux frameworks CSS (Tailwind, Bootstrap, Material UI). Premier breakpoint : 640 px (Tailwind sm) ou 576 px (Bootstrap sm) — bascule du smartphone vertical au smartphone horizontal ou aux petites tablettes. Deuxième breakpoint : 768 px (md) — bascule tablette portrait, idéal pour passer d'une colonne unique à deux colonnes. Troisième breakpoint : 1024 px (lg) — bascule desktop classique et tablette landscape. Quatrième breakpoint : 1280 px (xl) — desktop confortable, parfois 1536 px (2xl) pour les grands écrans.

La règle pratique : ne pas inventer ses propres breakpoints sauf raison forte. Aligner sur Tailwind ou Bootstrap garantit que les designers et autres développeurs comprennent immédiatement votre code, et que les composants externes (templates, plugins) s'intègrent sans friction. Le principe de moindre surprise s'applique aux breakpoints comme partout en code.

Erreurs classiques en CSS responsive et leurs corrections

Plusieurs anti-patterns reviennent dans les projets responsive de qualité moyenne. Premier anti-pattern : utiliser px partout sans réflexion. Préférez rem pour les tailles de texte (respecte les préférences utilisateur de zoom navigateur), et % ou vw/vh pour les dimensions relatives. Le viewport vh a un piège classique sur mobile (la barre d'URL qui apparaît/disparaît change la hauteur perçue) — utilisez plutôt les nouvelles unités dvh (dynamic viewport height) supportées depuis 2023 sur tous les navigateurs récents.

Deuxième anti-pattern : oublier la balise viewport. Sans <meta name="viewport" content="width=device-width, initial-scale=1"> dans le head HTML, le navigateur mobile zoome out le site comme un mini écran desktop. Toutes les media queries deviennent inopérantes. C'est l'erreur la plus fréquente sur les sites WordPress mal configurés. Troisième anti-pattern : trop de breakpoints différents. Plus de 5 breakpoints custom rend le CSS impossible à maintenir. Restez sur 3-4 valeurs cohérentes alignées sur un framework de référence.

Performance responsive : l'optimisation des images

Les images représentent généralement 60 à 80 % du poids d'une page web. Sur un site responsive, charger une image full HD pour un smartphone qui n'en affiche qu'un quart est un gaspillage massif de bande passante 4G. La solution standard tient en deux techniques HTML natives. Premier outil : l'attribut srcset qui propose plusieurs versions d'une même image avec des tailles différentes, et laisse le navigateur choisir la bonne selon la résolution et la densité d'écran.

<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Atelier code Dakar">

Deuxième outil : la balise <picture> avec sources conditionnelles, utile pour servir des formats modernes (AVIF, WebP) avec fallback JPEG pour les anciens navigateurs. AVIF économise 30 à 50 % de poids par rapport à JPEG à qualité visuelle équivalente — c'est le format recommandé en 2026 pour toute image bitmap. Combinez avec un CDN (Cloudflare, Bunny CDN) qui transforme automatiquement les images au format optimal selon le navigateur du visiteur, et la performance perçue passe à un autre niveau.

Audit responsive d'un site existant

Pour auditer un site déjà en production, suivre une checklist en cinq points. Premier point : ouvrir le site sur Chrome DevTools en mode mobile (Ctrl+Shift+M ou Cmd+Shift+M) et tester sur iPhone 12 Pro, Galaxy S20, iPad Air et Desktop 1440p. Deuxième point : lancer un audit Lighthouse en mode mobile avec throttling Slow 4G — l'objectif est un score Performance > 70 et un Largest Contentful Paint < 2,5 s. Troisième point : vérifier les tap targets (boutons, liens) : minimum 44 × 44 px pour respecter l'accessibilité tactile. Quatrième point : tester l'ensemble du site uniquement au clavier, sans souris ni écran tactile. Cinquième point : vérifier le rendu sur un Android d'entrée de gamme physique avec une connexion 4G dégradée. Si les cinq points passent, votre site est prêt pour la production ouest-africaine.

Dans la continuité

#css #mobile #responsive
Service ITSkillsCenter

Application mobile Android et iOS

Création d'application mobile Android et iOS. À partir de 350 000 FCFA.

Démarrer mon projet
Publicité

Articles Similaires