Responsive
Media-Queries
Mobile-First
Css
Breakpoints
Flexbox
Images-Responsives
Viewport
Css-Moderne
Front-End
Design-Web
Ux
Integration-Web
Responsive-Design
Adaptez votre site mobile-first avec les media queries : breakpoints, flexbox, images responsives et bonnes pratiques pour tous les écrans en 2026.
Introduction
Responsive Design signifie que votre site s'adapte parfaitement à TOUS les écrans : téléphones, tablettes, desktops. C'est essentiel aujourd'hui car plus de 60% du trafic web vient du mobile.
Règle d'or : Commencez par le design mobile (mobile-first), puis agrandissez. C'est plus facile que de réduire.
Balise viewport — Première étape OBLIGATOIRE
Sans cette balise, les mobiles pensent que votre site est en desktop. TOUJOURS l'ajouter en premier :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Cela dit au navigateur mobile : "Ce site EST responsive, utilise la largeur du device (width=device-width), zoom initial à 100%".
Sans viewport : Le site s'affiche à 980px sur mobile, tout est minuscule
Avec viewport : Le site utilise la vraie largeur du téléphone (375px, 768px, etc.)
Mobile-first approach — Commencer par le mobile
Au lieu de designer desktop puis réduire, faites l'inverse : mobile d'abord, puis agrandissez avec media queries.
/* D'abord, le CSS pour MOBILE (le plus petit écran) */
.container {
width: 100%;
padding: 10px;
font-size: 14px;
}
/* Puis ajouter des styles pour les écrans plus grands */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
font-size: 16px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
font-size: 18px;
}
}
Avantages mobile-first :
- Plus rapide sur mobile (moins de CSS chargé)
- Meilleure performance
- Forcé de penser simple d'abord
Media queries — Adapter le CSS par écran
Les media queries appliquent du CSS uniquement si certaines conditions sont respectées :
min-width — À partir d'une certaine largeur
/* À partir de 768px et plus */
@media (min-width: 768px) {
.sidebar {
width: 250px;
display: block;
}
}max-width — Jusqu'à une certaine largeur
/* Jusqu'à 767px inclus */
@media (max-width: 767px) {
.sidebar {
display: none;
}
}Entre deux — Combinaison min et max
/* Seulement sur tablettes (768px à 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
.container {
width: 750px;
}
}Orientation — Portrait ou Landscape
/* Téléphone en portrait */
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
/* Téléphone en landscape */
@media (orientation: landscape) {
body {
flex-direction: row;
}
}Multiple conditions
/* Tablette en portrait uniquement */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* Styles spécifiques */
}Breakpoints courants
Voici les breakpoints qui fonctionnent pour 95% des appareils :
| Appareil | Largeur | Media query |
|---|---|---|
| Mobile (petit) | 320px - 375px | max-width: 374px |
| Mobile (standard) | 375px - 480px | min-width: 375px |
| Tablette (petit) | 481px - 768px | min-width: 481px |
| Tablette (grand) | 769px - 1024px | min-width: 769px |
| Desktop | 1025px + | min-width: 1025px |
| Desktop (grand) | 1440px + | min-width: 1440px |
Flexbox & Grid responsives
Flexbox responsive — Changer direction selon écran
.container {
display: flex;
flex-direction: column; /* Mobile : empilé */
gap: 10px;
}
@media (min-width: 768px) {
.container {
flex-direction: row; /* Tablette+ : côte à côte */
gap: 20px;
}
}Grid responsive — Changer nombre colonnes
.gallery {
display: grid;
grid-template-columns: 1fr; /* Mobile : 1 colonne */
gap: 10px;
}
@media (min-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr); /* Tablette : 2 colonnes */
}
}
@media (min-width: 1024px) {
.gallery {
grid-template-columns: repeat(3, 1fr); /* Desktop : 3 colonnes */
}
}Images responsives
max-width: 100% — L'image jamais plus grande que son conteneur
img {
max-width: 100%;
height: auto;
display: block;
}srcset — Charger la bonne résolution selon écran
<img
src="image-small.jpg"
srcset="
image-small.jpg 320w,
image-medium.jpg 768w,
image-large.jpg 1440w
"
alt="Description">
/* Le navigateur choisit l'image la plus appropriée */Balise picture — Différentes images selon écran
<picture>
<source media="(min-width: 1024px)" srcset="image-desktop.jpg">
<source media="(min-width: 768px)" srcset="image-tablet.jpg">
<img src="image-mobile.jpg" alt="Description">
</picture>
/* Mobile = image-mobile, Tablette = image-tablet, Desktop = image-desktop */Unités relatives vs fixes
Unités fixes — Mêmes pixels partout (mauvais pour responsive)
.container {
width: 800px; /* Trop grand pour mobile */
padding: 20px;
font-size: 16px;
}Unités relatives — S'adaptent à l'écran (bon pour responsive)
.container {
width: 100%; /* Prend toute la largeur */
max-width: 1200px; /* Mais jamais plus que ça */
padding: 5%; /* Pourcentage de la largeur */
font-size: 1em; /* Relatif à l'écran */
}
h1 {
font-size: 2.5em; /* Relatif au font-size de body */
}
.box {
width: calc(100% - 20px); /* Calculs flexibles */
}
Bonnes pratiques :
-
%— Largeurs et hauteurs flexibles -
em / rem— Tailles de texte -
vw / vh— Taille écran (viewport) -
px— Évitez pour les widths/heights (sauf cas spécifiques)
Exemples complets
Exemple 1 : Site responsive complet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Mobile first */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
.container {
width: 100%;
padding: 10px;
}
header {
background: #333;
color: white;
padding: 20px;
}
nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.content {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* Tablette */
@media (min-width: 768px) {
body {
font-size: 16px;
}
.container {
padding: 20px;
max-width: 750px;
margin: 0 auto;
}
nav {
flex-direction: row;
gap: 20px;
}
.content {
grid-template-columns: 1fr 1fr;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1170px;
padding: 30px;
}
.content {
grid-template-columns: 2fr 1fr;
}
}
</style>
</head>
</html>Conclusion
Le responsive design n'est pas optionnel, c'est la norme. Commencez mobile-first, utilisez les bonnes breakpoints, et testez sur vrais appareils.
- Viewport meta tag
- Mobile-first approach
- Media queries (min-width, max-width)
- Flexbox & Grid adaptatifs
- Unités relatives (%, em, vw)
- Images responsives (srcset, picture)
Outil utile : DevTools Chrome / Firefox : testez votre site avec Device Emulation (F12 → responsive mode)
Questions fréquentes
L'approche mobile-first consiste à écrire d'abord les styles pour les petits écrans, puis à les surcharger progressivement pour les écrans plus larges via des media queries min-width. Elle est préférable pour plusieurs raisons : les styles de base sont plus légers (mobiles téléchargent moins de CSS), elle force à prioriser le contenu essentiel (contrainte d'espace = discipline de design), et Google indexe en priorité la version mobile (Mobile-First Indexing). Techniquement, un @media (min-width: 768px) ne charge la règle que si l'écran est assez large, tandis qu'un @media (max-width: 768px) surcharge des styles qui auraient été téléchargés même sur desktop. Bootstrap 5 est entièrement mobile-first avec ses breakpoints xs, sm, md, lg, xl, xxl.
Les breakpoints Bootstrap 5 modernes sont : 576px (sm — petits téléphones paysage), 768px (md — tablettes portrait), 992px (lg — tablettes paysage / laptops), 1200px (xl — grands écrans), 1400px (xxl — très grands écrans). Mais les breakpoints fixes ont une limite : ils ne correspondent pas nécessairement aux appareils réels en constante évolution. L'approche moderne recommande des breakpoints "content-driven" : ajouter un breakpoint quand le design se casse, pas pour correspondre à un device. Les container queries CSS (@container) permettent d'aller plus loin en définissant des breakpoints basés sur la taille du conteneur parent plutôt que de la fenêtre — révolutionnaire pour les composants réutilisables.
Les unités modernes remplacent avantageusement les pixels fixes : vw (viewport width), vh (viewport height), vmin et vmax pour des tailles relatives au viewport. La fonction clamp() est particulièrement puissante : font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem) définit une taille minimale (1rem), idéale (2vw + 0.5rem, qui scale avec la largeur), et maximale (1.5rem), créant une typographie vraiment fluide sans media queries. Pour les espacements, utiliser des custom properties CSS variables combinées à clamp() : --spacing-md: clamp(1rem, 3vw, 2rem). Les unités dvh (dynamic viewport height) résolvent le problème classique des 100vh sur mobile où la barre d'adresse réduit la hauteur visible.
Le workflow de test complet inclut plusieurs niveaux : les DevTools du navigateur (mode responsive avec preset d'appareils et rotation) permettent un test rapide en développement mais ne reproduisent pas le comportement tactile. BrowserStack ou LambdaTest donnent accès à de vrais appareils physiques dans le cloud — essentiel pour détecter les bugs iOS Safari spécifiques (comportement de viewport, overscroll, position: sticky). Les outils de test automatisé comme Playwright supportent les viewports mobiles : test.use({ viewport: { width: 375, height: 812 } }). Pour les performances mobiles, Lighthouse en mode mobile simule une connexion 3G et un CPU ralenti, révélant les vrais bottlenecks sur des appareils moins puissants.
