Le Responsive Web Design
Le responsive design garantit que votre site s'affiche correctement sur tous les appareils, du smartphone au grand ecran.
Les fondamentaux
1. Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">2. Media Queries
/* Mobile first */
.container { padding: 10px; }
/* Tablette */
@media (min-width: 768px) {
.container { padding: 20px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { padding: 40px; }
}Flexbox pour le layout
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}CSS Grid pour les grilles
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Images responsives
img {
max-width: 100%;
height: auto;
}Mobile First : commencez par designer pour mobile, puis ajoutez des styles pour les grands ecrans.
Outils utiles
- Chrome DevTools (mode responsive)
- Bootstrap / Tailwind CSS
- BrowserStack pour les tests