Responsive Design : mobile-first & media queries

Introduction

Responsive Design signifie que votre site s'adapte parfaitement à TOUS les écrans : téléphones, tablettes, desktops. C'est essentiel aujourd'hui car plus de 60% du trafic web vient du mobile.

Règle d'or : Commencez par le design mobile (mobile-first), puis agrandissez. C'est plus facile que de réduire.

Balise viewport — Première étape OBLIGATOIRE

Sans cette balise, les mobiles pensent que votre site est en desktop. TOUJOURS l'ajouter en premier :

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

Cela dit au navigateur mobile : "Ce site EST responsive, utilise la largeur du device (width=device-width), zoom initial à 100%".

Sans viewport : Le site s'affiche à 980px sur mobile, tout est minuscule Avec viewport : Le site utilise la vraie largeur du téléphone (375px, 768px, etc.)

Mobile-first approach — Commencer par le mobile

Au lieu de designer desktop puis réduire, faites l'inverse : mobile d'abord, puis agrandissez avec media queries.

/* D'abord, le CSS pour MOBILE (le plus petit écran) */
.container {
    width: 100%;
    padding: 10px;
    font-size: 14px;
}

/* Puis ajouter des styles pour les écrans plus grands */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        font-size: 18px;
    }
}

Avantages mobile-first :

✅ Plus rapide sur mobile (moins de CSS chargé)
✅ Meilleure performance
✅ Forcé de penser simple d'abord

Media queries — Adapter le CSS par écran

Les media queries appliquent du CSS uniquement si certaines conditions sont respectées :

min-width — À partir d'une certaine largeur

/* À partir de 768px et plus */
@media (min-width: 768px) {
    .sidebar {
        width: 250px;
        display: block;
    }
}

max-width — Jusqu'à une certaine largeur

/* Jusqu'à 767px inclus */
@media (max-width: 767px) {
    .sidebar {
        display: none;
    }
}

Entre deux — Combinaison min et max

/* Seulement sur tablettes (768px à 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        width: 750px;
    }
}

Orientation — Portrait ou Landscape

/* Téléphone en portrait */
@media (orientation: portrait) {
    body {
        flex-direction: column;
    }
}

/* Téléphone en landscape */
@media (orientation: landscape) {
    body {
        flex-direction: row;
    }
}

Multiple conditions

/* Tablette en portrait uniquement */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Styles spécifiques */
}

Breakpoints courants

Voici les breakpoints qui fonctionnent pour 95% des appareils :

Appareil	Largeur	Media query
Mobile (petit)	320px - 375px	`max-width: 374px`
Mobile (standard)	375px - 480px	`min-width: 375px`
Tablette (petit)	481px - 768px	`min-width: 481px`
Tablette (grand)	769px - 1024px	`min-width: 769px`
Desktop	1025px +	`min-width: 1025px`
Desktop (grand)	1440px +	`min-width: 1440px`

Flexbox & Grid responsives

Flexbox responsive — Changer direction selon écran

.container {
    display: flex;
    flex-direction: column;  /* Mobile : empilé */
    gap: 10px;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;  /* Tablette+ : côte à côte */
        gap: 20px;
    }
}

Grid responsive — Changer nombre colonnes

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

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

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

Images responsives

max-width: 100% — L'image jamais plus grande que son conteneur

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

srcset — Charger la bonne résolution selon écran

<img
    src="image-small.jpg"
    srcset="
        image-small.jpg 320w,
        image-medium.jpg 768w,
        image-large.jpg 1440w
    "
    alt="Description">
/* Le navigateur choisit l'image la plus appropriée */

Balise picture — Différentes images selon écran

<picture>
    <source media="(min-width: 1024px)" srcset="image-desktop.jpg">
    <source media="(min-width: 768px)" srcset="image-tablet.jpg">
    <img src="image-mobile.jpg" alt="Description">
</picture>
/* Mobile = image-mobile, Tablette = image-tablet, Desktop = image-desktop */

Unités relatives vs fixes

Unités fixes — Mêmes pixels partout (mauvais pour responsive)

.container {
    width: 800px;  /* Trop grand pour mobile */
    padding: 20px;
    font-size: 16px;
}

Unités relatives — S'adaptent à l'écran (bon pour responsive)

.container {
    width: 100%;        /* Prend toute la largeur */
    max-width: 1200px;  /* Mais jamais plus que ça */
    padding: 5%;        /* Pourcentage de la largeur */
    font-size: 1em;     /* Relatif à l'écran */
}

h1 {
    font-size: 2.5em;   /* Relatif au font-size de body */
}

.box {
    width: calc(100% - 20px);  /* Calculs flexibles */
}

Bonnes pratiques :

✅ % — Largeurs et hauteurs flexibles
✅ em / rem — Tailles de texte
✅ vw / vh — Taille écran (viewport)
❌ px — Évitez pour les widths/heights (sauf cas spécifiques)

Exemples complets

Exemple 1 : Site responsive complet

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Mobile first */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

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

        header {
            background: #333;
            color: white;
            padding: 20px;
        }

        nav {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        /* Tablette */
        @media (min-width: 768px) {
            body {
                font-size: 16px;
            }

            .container {
                padding: 20px;
                max-width: 750px;
                margin: 0 auto;
            }

            nav {
                flex-direction: row;
                gap: 20px;
            }

            .content {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Desktop */
        @media (min-width: 1024px) {
            .container {
                max-width: 1170px;
                padding: 30px;
            }

            .content {
                grid-template-columns: 2fr 1fr;
            }
        }
    </style>
</head>
</html>