Cours 8: Intro au responsive¶
Lundi 23 mars / mercredi 25 mars
Annonces et rappel¶
Vous devriez avoir remis, AVANT votre cours d'aujourd'hui le projet 1.
Fichier Power Point de présentation du cours¶
📚 Contenu du cours d'aujourd'hui
Activité 1: Amorce: le constat du site qui casse (10 min)¶
Exposé : les concepts de base¶
- Définition qu'est-ce que le responsive
- Points de rupture (breakpoints)
- La syntaxe de base d'une requête média (media query)
Responsive¶
Définition: Un design responsive adapte la mise en page à la contrainte d'affichage courante, peu importe l'appareil.
Breakpoint (point de rupture)¶
Un breakpoint = là où ton contenu souffre
┌─────────────────────┐ ┌──────────┐
│ ● ● ● │ │ ● ● ● │
│ ┌───┐ ┌───┐ ┌───┐ │ │ ┌─┐┌─┐┌─┐│
│ │ │ │ │ │ │ │ │ │ ││ ││ ││
│ │ │ │ │ │ │ │ →→→ │ │ ││ ││ ││
│ │ │ │ │ │ │ │ │ │ ││ ││ ││
│ └───┘ └───┘ └───┘ │ │ └─┘└─┘└─┘│
└─────────────────────┘ └──────────┘
✓ Confortable ✗ Souffrance ← ici le breakpoint
Règle : Ajoute un breakpoint quand ton contenu te le demande — jamais en ciblant un appareil.
Media query (requête média)¶
La syntaxe d'une media query¶
@media (min-width: 768px) {
.conteneur {
flex-direction: row;
}
}
@media→ Mot-clé — démarre la règle conditionnelle(min-width: 768px)→ Condition — s'applique SI la fenêtre est ≥ 768px{ ... }→ Règles CSS qui s'appliquent seulement si la condition est vraie
Exposé mobile-first vs desktop-first¶
Mobile-first¶
Partir du minimum essentiel et ajouter de la complexité au fur et à mesure que l'espace augmente.
/* Mobile-first */
.nav { flex-direction: column; } /* mobile */
@media (min-width: 768px) {
.nav { flex-direction: row; }
}
On ajoute ↑
Desktop-first¶
Partir de la version riche et retirer des éléments au fur et à mesure que l'espace diminue.
/* Desktop-first */
.nav { flex-direction: row; } /* desktop */
@media (max-width: 767px) {
.nav { flex-direction: column; }
}
On retire ↑
min-width vs max-width¶
✅ Mobile-first: On part du petit, on ajoute des changements pour les écrans qui un un *min*imum d'une largeur X et +
/* Mobile-first (recommandé) */
/* Styles de base = mobile */
@media (min-width: 768px) { /* ajoute, écrase les styles pour le grand */ }
⚠️ Desktop-first: On part du grand, on retire des éléments et on fait des changements pour les écrans qui un un *max*imum d'une largeur X et -
/* Desktop-first */
/* Styles de base = desktop */
@media (max-width: 767px) { /* retire, réduit, écrase les styles pour simplifier pour le petit */ }
Activité 2: Analyse de maquettes responsive (25 min)¶
Activité 3: Exercice guidé : première media query (15 min)¶
------ PAUSE -------¶
Retour en groupe-classe¶
Révision de votre activité 3.
Activité 4: Atelier progressif (60 min)¶
🟢 Base 🟡 Intermédiaire 🔴 Avancé