05 - Adapter son site aux mobiles (Responsive)

Aujourd’hui, une grande partie des utilisateurs navigue sur mobile.

Un site doit donc s’adapter automatiquement à toutes les tailles d’écran.

C’est ce qu’on appelle le responsive design.

1. Pourquoi le responsive est important ?

Un site non adapté :

• Est difficile à lire
• Oblige à zoomer
• Donne une mauvaise expérience utilisateur

Un site responsive :

• S’adapte automatiquement
• Reste lisible sur tous les écrans
• Est plus professionnel

2. La balise viewport

Elle est indispensable pour le responsive.

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

Elle permet au navigateur d’adapter la largeur de la page à l’écran.

3. Les media queries

Les media queries permettent d’appliquer du CSS selon la taille de l’écran.

@media screen and (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

Ce code s’applique uniquement sur les écrans de 768px ou moins.

4. Adapter un layout avec Flexbox

Flexbox est très utile pour le responsive.

.container {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Résultat :

• Sur ordinateur : éléments côte à côte
• Sur mobile : éléments empilés

5. Images adaptatives

Une image doit s’adapter à son conteneur :

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

6. À retenir

• Le responsive est indispensable aujourd’hui
• La balise viewport est obligatoire
• Les media queries permettent d’adapter le design
• Flexbox facilite le responsive
• Les images doivent être adaptatives

Conclusion

Votre site peut maintenant s’adapter à tous les écrans.

Dans le prochain chapitre, nous verrons comment accélérer le développement avec Bootstrap.

Navigation dans la série