📱 Semaine 2 - Jour 3 : Responsive Design

📚 Qu'est-ce que le Responsive Design ?

Le Responsive Web Design est une approche qui permet aux sites web de s'adapter automatiquement à toutes les tailles d'écran (mobile, tablette, desktop). C'est essentiel car plus de 60% du trafic web vient des mobiles !

📏 Les unités relatives

Pixels (px) - Absolu

Unité fixe, ne s'adapte pas.

width: 200px
.box {
  width: 200px;
}

⚠️ Problème : Pas responsive, taille fixe

Pourcentage (%) - Relatif

Relatif à la taille du parent.

width: 50%
.box {
  width: 50%;
}

✅ Avantage : S'adapte au conteneur parent

em et rem

em : Relatif à la taille de police du parent
rem : Relatif à la taille de police racine (html)

html { font-size: 16px; }

.element {
  font-size: 1.5rem; /* 24px */
  padding: 2em; /* Relatif au font-size */
}

💡 Préférer : rem pour plus de prévisibilité

Viewport (vw, vh)

vw : 1% de la largeur de la fenêtre
vh : 1% de la hauteur de la fenêtre

width: 80vw
.hero {
  width: 100vw;
  height: 100vh;
}

✅ Usage : Sections plein écran, hero sections

📐 Media Queries

Syntaxe des Media Queries

Les media queries permettent d'appliquer des styles CSS en fonction de la taille de l'écran.

/* Desktop First (du plus grand au plus petit) */
.element {
  font-size: 18px; /* Desktop */
}

@media (max-width: 768px) {
  .element {
    font-size: 16px; /* Tablette */
  }
}

@media (max-width: 480px) {
  .element {
    font-size: 14px; /* Mobile */
  }
}
Redimensionnez votre fenêtre !
Desktop (bleu) → Tablette (rouge) → Mobile (vert)

📱 Mobile First (Recommandé)

Approche Mobile First

Mobile First : On commence par le design mobile, puis on ajoute des styles pour les écrans plus grands avec min-width.

/* Mobile First (du plus petit au plus grand) */
.element {
  font-size: 14px; /* Mobile par défaut */
}

@media (min-width: 768px) {
  .element {
    font-size: 16px; /* Tablette et + */
  }
}

@media (min-width: 1024px) {
  .element {
    font-size: 18px; /* Desktop */
  }
}
Mobile First en action !
Mobile (vert, 14px) → Tablette (rouge, 16px) → Desktop (bleu, 18px)

✅ Avantages Mobile First :
• Meilleure performance sur mobile
• Progressive enhancement (amélioration progressive)
• Correspond à l'usage réel (60%+ de trafic mobile)

🎯 Breakpoints courants

Appareil Breakpoint Media Query
📱 Mobile (Portrait) < 480px @media (max-width: 480px)
📱 Mobile (Paysage) 481px - 767px @media (min-width: 481px) and (max-width: 767px)
📲 Tablette 768px - 1023px @media (min-width: 768px) and (max-width: 1023px)
💻 Desktop 1024px - 1279px @media (min-width: 1024px)
🖥️ Large Desktop > 1280px @media (min-width: 1280px)

🖼️ Images Responsives

Image responsive simple

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

✅ Effet : L'image ne dépasse jamais son conteneur et garde ses proportions

Meta viewport (essentiel !)

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

⚠️ OBLIGATOIRE : Sans cette balise, le responsive ne fonctionne pas sur mobile !

🏆 Best Practices

✅ À faire

  • Utiliser Mobile First
  • Utiliser des unités relatives (%, rem, vw)
  • Tester sur vrais appareils
  • Images responsive (max-width: 100%)
  • Meta viewport obligatoire
  • Breakpoints cohérents

❌ À éviter

  • Largeurs fixes en pixels
  • Trop de breakpoints
  • Oublier la meta viewport
  • Tester uniquement sur desktop
  • Images trop lourdes
  • Scroll horizontal sur mobile
Froggiesplaining :


🎯 Objectifs :
✅ Comprendre le concept de Responsive Design
✅ Utiliser les unités relatives (%, rem, vw, vh)
✅ Maîtriser les media queries
✅ Appliquer l'approche Mobile First

📖 Points clés :
• Mobile First = min-width (recommandé)
• Desktop First = max-width
• Unités : %, rem, vw/vh pour le responsive
• Images : max-width: 100%, height: auto
• Meta viewport : OBLIGATOIRE !

🏋️ Exercice :
Rendez votre page portfolio responsive avec :
• 1 colonne sur mobile
• 2 colonnes sur tablette
• 3 colonnes sur desktop

Froggie

GitHub - eCrea