Chapitre 10 : Responsive Design et media queries
Apprenez à créer des sites qui s'adaptent parfaitement à tous les appareils.
1. Qu'est-ce que le Responsive Design ?
Le Responsive Design consiste à adapter l'apparence d'un site web à toutes les tailles d'écran : mobiles, tablettes, ordinateurs...
Objectif : rendre la lecture et la navigation agréable sur tous les appareils, sans devoir zoomer ou faire défiler horizontalement.
2. Les Media Queries
Les Media Queries permettent d'appliquer des styles CSS uniquement si certaines conditions sont remplies (largeur d'écran, orientation, etc.).
2.1 Syntaxe de base
/* styles spécifiques */
}
Exemple :
body {
background-color: #f0f8ff;
}
}
3. Types de media
all: tous typesscreen: écransprint: impression
Exemple pour l'impression :
nav, footer {
display: none;
}
}
4. Breakpoints (points de rupture)
Ce sont des largeurs d'écran clés à partir desquelles le style doit changer.
max-width: styles pour écrans plus petitsmin-width: styles pour écrans plus grands
Exemples :
@media (max-width: 600px) {
.menu { display: none; }
}
/* Tablette */
@media (min-width: 601px) and (max-width: 1024px) {
.menu { font-size: 1.2em; }
}
/* Desktop */
@media (min-width: 1025px) {
.menu { display: flex; }
}
5. Approche mobile-first
On commence par styliser pour les mobiles (petits écrans), puis on adapte pour les écrans plus grands via des min-width.
font-size: 14px;
}
@media (min-width: 768px) {
.bloc {
font-size: 18px;
}
}
6. Orientation et autres options
Orientation écran :
body {
background: lightblue;
}
}
Résolution :
img {
height: auto;
}
}
7. Bonnes pratiques
- Commencer par une base mobile (mobile-first)
- Utiliser des unités relatives :
em,%,vh,vw - Garder les breakpoints simples : 600px, 768px, 1024px, etc.
8. À éviter
- Créer un media query par appareil spécifique
- Utiliser uniquement
px(pas flexible) - Empiler trop de règles différentes au lieu d'optimiser le code de base
9. Exercice pratique
Objectif : Créer une carte responsive qui s'adapte à l'écran.
HTML :
<h2>Titre</h2>
<p>Contenu de la carte...</p>
</div>
CSS :
background: #e3f2fd;
padding: 1.5em;
font-size: 1em;
}
@media (min-width: 768px) {
.carte {
font-size: 1.2em;
max-width: 600px;
margin: auto;
}
}
@media (min-width: 1024px) {
.carte {
font-size: 1.4em;
}
}
10. À retenir
- Les media queries adaptent le style aux conditions de l'appareil
- Le responsive design améliore l'expérience utilisateur sur tous les écrans
- L'approche mobile-first est recommandée