Responsive design + Media Queries

Mobile-First approach

Avec 60% du trafic web sur mobile, écris ton CSS pour mobile d'abord, puis adapte pour desktop avec des media queries.

/* Base : mobile */
.container { padding: 16px; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { padding: 32px; max-width: 1200px; margin: 0 auto; }
}

Breakpoints courants

• Mobile : 320-767px
• Tablet : 768-1023px
• Desktop : 1024-1439px
• Large desktop : 1440px+

💡 Test sur DevTools : Cmd/Ctrl+Shift+M dans Chrome pour basculer en mode mobile.