Adapter le web Ă tous les Ă©crans
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Approche mobile-first
Comprendre pourquoi c'est le standard
2. Configurer le viewport
Le meta tag obligatoire
3. Media queries avec min-width
Breakpoints basés sur le contenu
4. clamp() pour tailles fluides
Moins de media queries
5. Images responsives avec srcset et sizes
Optimiser le chargement pour chaque Ă©cran
Module 1
Pourquoi le responsive ?
Module 2
Mobile-first vs Desktop-first
Module 3
Viewport & Unités
Module 4
Media queries
Module 5
clamp() & Images responsives
Live Coding
Rendre une landing page responsive
Pourquoi le responsive ?
Les statistiques d'utilisation en 2026
Mobile
Desktop
Depuis 2019 : Google indexe en mobile-first — votre site DOIT être responsive pour le SEO !
❌ Site non-responsive
âś“ Site responsive
❌ Sans responsive
Desktop zoomé sur mobile
âś“ Avec responsive
Contenu adapté au mobile
Mobile-First vs Desktop-First
Pourquoi mobile-first est le standard moderne
Écrire le CSS pour mobile EN PREMIER, puis ajouter des styles pour écrans plus grands
/* Styles de base = Mobile */
.container {
width: 100%;
padding: 1rem;
}
/* Écrans plus grands */
@media (min-width: 768px) {
.container {
max-width: 720px;
padding: 2rem;
}
}
Règle : On commence simple (mobile) et on ajoute de la complexité (desktop)
Deux approches opposées
âś“ min-width (Mobile-First)
/* Mobile par défaut */
.box { width: 100%; }
@media (min-width: 768px) {
.box { width: 50%; }
}
↑ Styles ajoutés progressivement
âś— max-width (Desktop-First)
/* Desktop par défaut */
.box { width: 50%; }
@media (max-width: 767px) {
.box { width: 100%; }
}
↓ Styles surchargés pour mobile
âś“ Code plus simple
Moins de surcharge, moins de bugs
âś“ Performance
CSS optimisé pour les mobiles (60% du trafic)
âś“ SEO
Google indexe en mobile-first
✓ Contraintes créatives
Forcer Ă prioriser le contenu essentiel
Conseil : Tailwind CSS utilise mobile-first par défaut — c'est le standard moderne !
Viewport & Unités
La base du responsive : le meta viewport
Qu'est-ce que le viewport ? C'est la zone visible de la page web dans le navigateur. Sur mobile, cette zone est plus petite que sur desktop.
Sans ce meta tag, RIEN ne fonctionne !
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
width=device-width
Largeur = largeur de l'Ă©cran
initial-scale=1.0
Zoom initial Ă 100%
Sans ce meta tag : Le mobile affiche la version desktop zoomée — l'utilisateur doit pincer pour zoomer !
Unités relatives à la taille de la fenêtre du navigateur
vw
Viewport Width
1vw = 1% de la largeur du viewport
Ex: sur un Ă©cran de 1200px, 1vw = 12px
vh
Viewport Height
1vh = 1% de la hauteur du viewport
Ex: sur un Ă©cran de 800px de haut, 1vh = 8px
dvh
Dynamic Viewport Height
S'adapte quand la barre d'adresse mobile apparaît/disparaît
✓ Recommandé pour les sections pleine hauteur
svh / lvh
Small / Large Viewport Height
svh = hauteur minimale (barre d'adresse visible) | lvh = hauteur maximale (barre cachée)
Conseil 2026 : Utilisez dvh pour les sections pleine hauteur sur mobile — gère automatiquement la barre d'adresse !
.hero {
height: 100dvh; /* Hauteur dynamique */
display: flex;
align-items: center;
justify-content: center;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
100vh
Problème sur mobile avec la barre d'adresse
âś“ 100dvh
S'adapte à la hauteur visible réelle
❌ Sans meta viewport
Le navigateur mobile :
âś“ Avec meta viewport
Le navigateur mobile :
Vérifiez TOUJOURS que le meta viewport est présent dans le <head> !
Media Queries
Adapter les styles selon la taille de l'Ă©cran
@media (min-width: 768px) {
/* Styles pour écrans ≥ 768px */
.container { max-width: 720px; }
}
min-width
≥ cette taille
Mobile-first âś“
max-width
≤ cette taille
Desktop-first âś—
width
= cette taille exacte
Rarement utilisé
Basés sur le CONTENU, pas sur les devices !
⚠️ Règle : Les breakpoints ne correspondent PAS à des devices (iPhone, iPad...) mais au moment où votre contenu a besoin de s'adapter !
/* AND : les deux conditions */
@media (min-width: 768px) and (max-width: 1023px) {
/* Tablette uniquement */
}
/* OR : au moins une condition */
@media (max-width: 639px) or (hover: none) {
/* Mobile ou tactile */
}
/* NOT : inverse la condition */
@media not (min-width: 768px) {
/* Écrans < 768px */
}
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr; /* Mobile: 1 colonne */
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
}
}
âś“ Mobile-first : Style de base simple, puis on ajoute des colonnes
Accessibilité : respecter le zoom utilisateur
❌ px (problème)
@media (min-width: 768px)
Si l'utilisateur zoom le texte, le breakpoint ne s'adapte pas
✓ em (recommandé)
@media (min-width: 48em)
768px ÷ 16 = 48em — suit le zoom
Conversion : px Ă· 16 = em (768px = 48em, 1024px = 64em)
clamp() & Images Responsives
Tailles fluides et images optimisées
Tailles fluides SANS media queries
clamp(min, preferred, max)
.title {
font-size: clamp(1rem, 2.5vw, 2rem);
}
/*
- Minimum : 1rem (16px)
- Préféré : 2.5% de la largeur
- Maximum : 2rem (32px)
*/
/* Titre fluide */
h1 { font-size: clamp(1.5rem, 5vw, 4rem); }
/* Padding fluide */
.section { padding: clamp(1rem, 5vw, 4rem); }
/* Largeur de conteneur */
.container {
width: clamp(90%, 1200px, 100%);
}
/* Espacement entre éléments */
.grid { gap: clamp(1rem, 3vw, 2rem); }
âś“ Avantage : Une seule ligne au lieu de 3 media queries !
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Description">
srcset
Liste des images avec leur largeur réelle en pixels (w)
sizes
Largeur que l'image occupera selon le viewport
Résultat : Le navigateur choisit automatiquement l'image optimale selon l'écran et la densité de pixels (Retina)
Images différentes selon le format
<picture>
<source media="(min-width: 1024px)"
srcset="hero-desktop.jpg">
<source media="(min-width: 768px)"
srcset="hero-tablet.jpg">
<img src="hero-mobile.jpg" alt="Hero">
</picture>
Cas d'usage : Image recadrée différemment pour mobile (focus sur le sujet) vs desktop (vue large)
Rendre la landing page de vendredi responsive
Ouvrez DevTools : Ctrl+Shift+M pour le mode responsive
Ajouter le meta viewport
Dans le <head> de la page
Rendre la grille responsive
1 colonne mobile → 2 colonnes tablette → 3 colonnes desktop
Adapter la navigation
Menu hamburger sur mobile avec Tailwind
Utiliser clamp() pour les titres
Taille fluide sans media queries
Les erreurs Ă Ă©viter absolument
1. Oublier le meta viewport
Sans lui, le responsive ne fonctionne PAS du tout
2. Confondre min-width et max-width
Mobile-first vs Desktop-first
3. px au lieu de em
Problème d'accessibilité avec le zoom
4. Tester uniquement sur son Ă©cran
Utiliser DevTools responsive (Ctrl+Shift+M)
Rappel : Testez sur plusieurs tailles d'Ă©cran : 375px (iPhone SE), 768px (tablette), 1440px (desktop)
Mobile-First
CSS mobile d'abord
min-width dans media queries
Viewport
Meta tag obligatoire
vw, vh, dvh
Breakpoints
Basés sur le contenu
em pour l'accessibilité
clamp()
Tailles fluides
Moins de media queries
Images
srcset + sizes
<picture> pour art direction
Testing
DevTools responsive
Ctrl+Shift+M
Mobile-first = min-width
Écrire le CSS mobile d'abord, puis ajouter des styles pour écrans plus grands
Breakpoints = Contenu, pas devices
Choisir les breakpoints selon oĂą le contenu a besoin de s'adapter
clamp() pour la fluidité
Une seule ligne pour des tailles qui s'adaptent automatiquement
Toujours tester en responsive
DevTools (Ctrl+Shift+M) — plusieurs tailles d'écran
PrĂŞt pour le live coding !
Rappel : Ctrl+Shift+M pour le mode responsive dans DevTools