Design responsive avec CSS
Flex responsive et Grid responsive ont montré des astuces de mise en page aux breakpoints. Le design responsive, c’est la vue d’ensemble : un site lisible sur téléphone, tablette et grand écran — sans deux copies HTML. Cette leçon pose les habitudes ; media queries, breakpoints et images responsive approfondissent ensuite.
Boîte à outils du design responsive
📊 Design responsive en bref
| Élément | Rôle courant |
|---|---|
| Viewport meta | Indique au mobile d’utiliser la largeur de l’appareil, pas une fausse colonne desktop |
| Conteneur fluide | width: 100% + max-width + padding latéral — longueur de ligne lisible |
Unités relatives (rem, %, em) |
Typo et espacements qui suivent réglages et contexte |
| Images flexibles | max-width: 100% pour éviter le débordement sur écran étroit |
| Un seul arbre HTML | Mêmes repères ; le CSS porte les changements de layout |
| Media queries (leçon suivante) | Appliquer des règles quand le viewport correspond |
Les pages à largeur fixe qui zooment ou scrollent horizontalement sur mobile frustrent. Le design responsive accepte toute largeur et ajuste calmement espacement, colonnes et typo — avec Flex et Grid déjà pratiqués.
Viewport meta — le mobile a besoin de l’indice
Sans <meta name="viewport" content="width=device-width, initial-scale=1">, beaucoup de téléphones rendent une largeur desktop réduite. Une fois dans le <head>, puis le CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first écrit la base pour écrans étroits, puis des requêtes min-width pour agrandir. Desktop-first part large et utilise max-width pour resserrer — comme Flex/Grid responsive. Les deux conviennent si vous changez une couche à la fois ; une habitude par projet.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* La leçon Media Queries ajoute des règles min-width ici */
Conteneur fluide centré
Largeur pleine avec plafond max-width et padding horizontal. Ce motif marche avant Flex ou Grid pour les colonnes.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Unités relatives pour typo et espacement
rem se lie à la taille racine — pratique pour titres et gaps. % pour les largeurs dans le parent. Évitez tout figer en px quand une échelle relative garde la page stable au zoom.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Images et médias flexibles
Des bitmaps plus larges que le viewport provoquent un scroll horizontal. Garde simple : display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Habitude responsive calme
Un arbre HTML. Viewport meta en place. Conteneur fluide et unités relatives d’abord. Flex/Grid responsive quand les colonnes doivent refluer — pas un second site « mobile only ». Notez votre plan de breakpoints ; Media Queries nomme la syntaxe.
À vous de jouer
- Vérifiez viewport meta sur une page d’exemple.
- Enveloppez le contenu dans un conteneur fluide avec
max-widthet padding. - Texte en
remet testez le zoom navigateur. - Règle image flexible sur une galerie.
- Un layout qui demandera encore une media query — gardez-le pour la prochaine leçon.
Erreurs courantes
- Largeurs px fixes sur chaque wrapper
- Site m.example.com séparé au lieu de CSS responsive sur un arbre
- Oublier viewport meta et s’étonner du « zoom out » mobile
- Grosses images sans
max-width: 100% - Croire que cette intro remplace media queries, breakpoints et images responsive
Résumé
- Le design responsive adapte un HTML à plusieurs tailles de viewport
- Viewport meta + conteneur fluide + unités relatives = fondation
- Mobile-first et desktop-first sont des points de départ ; media queries appliquent les shifts
- Flex/Grid responsive sont des outils dans cette mentalité
- Suite : Media Queries
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut