Responsive et mobile first

Objectifs

À la fin de cette leçon, vous saurez :

• remplacer les pixels fixes par des unités relatives — et savoir laquelle choisir ;
• écrire des media queries qui enrichissent au lieu de corriger ;
• appliquer la démarche mobile first, du code au test ;
• diagnostiquer le piège classique : media queries inopérantes sans meta viewport.

🔗 Pour vous rafraîchir la mémoire : flexbox et grid · la structure d'un document HTML

Le problème des pixels fixes

Une mise en page en width: 1200px est parfaite sur votre écran... et catastrophique partout ailleurs. Le web se consulte sur des largeurs allant de 320px (petit mobile) à 2560px+ (grand écran), en passant par tablettes et fenêtres redimensionnées. La page doit s'adapter seule — c'est le responsive, et il repose sur deux gestes : des unités relatives, puis des points de rupture.

Les unités relatives : arrêter de figer

Unité	Référence	Usage
px	pixel absolu	bordures fines, ombres, détails
%	la taille du PARENT	largeurs fluides
rem	taille de police RACINE	espacements et tailles accessibles
vw / vh	1 % de la largeur/hauteur du viewport	sections plein écran

Le héros méconnu est rem : il se rapporte à la taille de police racine — que l'utilisateur peut AGRANDIR dans les réglages de son navigateur si sa vue l'exige.

body   { font-size: 1rem; }     /* suit le réglage utilisateur (16px par défaut) */
.titre { font-size: 2rem; }     /* double de la racine */
.conteneur { max-width: 60rem; margin: 0 auto; padding: 1rem; }

Si un utilisateur règle son navigateur à 120 %, tout ce qui est en rem grossit proportionnellement — votre page respecte ses besoins. Des tailles figées en px cassent ce respect. C'est aussi une question d'accessibilité mesurable, pas une préférence esthétique.

Trois lignes à connaître par cœur :

img { max-width: 100%; height: auto; }   /* l'image ne déborde JAMAIS de son parent */
.conteneur { max-width: 60rem; margin-inline: auto; }  /* contenu centré, plafonné */
* { box-sizing: border-box; }            /* vos largeurs restent honnêtes */

La première ligne est LE correctif anti-débordement universel : sans elle, toute image plus large que son conteneur casse la mise en page mobile.

Mobile first : enrichir plutôt que corriger

Principe : écrire D'ABORD le style pour petit écran — le plus simple, empilé — puis AJOUTER de la complexité pour les grands avec min-width :

.deux-colonnes {
  display: grid;
  gap: 1rem;                      /* mobile : UNE colonne par défaut */

}

@media (min-width: 48rem) {       /* à partir de ~768px seulement */
  .deux-colonnes {
    grid-template-columns: 1fr 1fr;   /* ...on passe à deux */
  }
}

Comparez avec la démarche inverse (« desktop first » : tout le style desktop écrit, puis des media queries pour CORRIGER vers le mobile). Le mobile first gagne pour trois raisons :

1. La base est simple : empiler verticalement est le comportement naturel du flux ; on ne « dé-casse » rien ;
2. Le mobile est majoritaire : la majorité des visiteurs reçoit le style de base, sans surcharge ;
3. Les corrections deviennent des ajouts : chaque media query dit uniquement CE QUI CHANGE aux grandes tailles — lisibilité du CSS accrue.

Points de rupture usuels : ~48rem (tablette/paysage), ~64–75rem (desktop). Inutile d'en multiplier : deux ou trois suffisent, ajustés à VOTRE contenu (le point de rupture naît du moment où le contenu casse, pas d'une liste magique).

Tester : DevTools mode responsive

F12 → icône téléphone/tablette (ou Ctrl+Shift+M) : la fenêtre devient un viewport simulé avec presets d'appareils et largeur réglable au pixel. Testez systématiquement 360px, 768px et 1280px — et surtout : faites GLISSER la largeur progressivement pour repérer où ça casse, plutôt que sauter entre valeurs rondes.

Le piège n°1 : media queries mortes sans meta viewport

Symptôme classique : vos media queries semblent ignorées sur mobile. Cause quasi certaine : la balise vue au chapitre 13 manque dans le <head> :

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

Sans elle, le mobile simule un écran de ~980px puis zoome : vos breakpoints basés sur device-width ne se déclenchent JAMAIS. C'est le premier réflexe devant un responsive qui « ne marche pas » — avant même de relire le CSS.

Exercice

1. Ajoutez à votre CV : box-sizing global, max-width: 100% sur les images, conteneur principal plafonné et centré.
2. Passez la grille « compétences/expériences » en mobile first : une colonne par défaut, deux à partir de 48rem.
3. Testez en DevTools responsive : vérifiez à 360px puis 1280px, en glissant la largeur.
4. Retirez TEMPORAIREMENT le meta viewport et testez en mode mobile : constatez, remettez.
5. Passez temporairement body { font-size } en 0.8rem : observez que tout ce qui est en rem suit. Que concluez-vous sur les espacements en px ?

Résumé

• rem/%/vw au lieu de px fixes ; images bornées (max-width: 100%) partout.
• Mobile first : base simple + @media (min-width: ...) qui ENRICHIT.
• Deux ou trois breakpoints suffisent, choisis là où votre contenu casse.
• Media queries inertes ? Vérifier le meta viewport AVANT de soupçonner le CSS.