Le responsive design et les media queries

Un site responsive s’adapte à toutes les tailles d’écran : téléphone, tablette, ordinateur, grand écran. On ne fait pas trois sites : on écrit un seul HTML et un CSS qui s’adapte.

1. La balise viewport

Sans elle, le téléphone fait comme s’il avait un écran d’ordinateur, puis rétrécit tout.

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

2. Des tailles relatives

• largeurs en %, max-width plutôt que width fixe ;
• textes en rem ;
• img { max-width: 100%; height: auto; } ;
• Flexbox avec flex-wrap: wrap : les éléments passent à la ligne seuls.

3. Les media queries

@media (max-width: 600px) { ... }   /* écrans de 600 px ou moins */
@media (min-width: 768px) { ... }   /* écrans de 768 px ou plus */
@media (min-width: 768px) and (max-width: 1023px) { ... }  /* tablettes */
@media print { ... }                /* à l'impression */

Les points de rupture (breakpoints) les plus courants :

4. Mobile first

On écrit d’abord le CSS du petit écran (une colonne, gros boutons), puis on ajoute des @media (min-width: ...) pour les écrans plus grands. Le code est plus court, et le téléphone ne charge que le nécessaire.

Tester

Dans Chrome ou Firefox, F12 puis l’icône téléphone (ou Ctrl + Maj + M) : on choisit un modèle d’appareil et on voit le rendu. Rien ne remplace un essai sur un vrai téléphone.