Le Responsive Design est une approche de conception web qui fait en sorte qu'un site s'adapte automatiquement à la taille de l'écran de l'utilisateur.
Technologies clés :
- Media Queries CSS
@media (max-width: 768px) {
/* Styles mobile */
}
- Grilles flexibles (Flexbox, Grid)
- ️ Images fluides (
max-width: 100%) - Unités relatives (rem, em, %, vw/vh)
Breakpoints typiques :
- Mobile : < 768px
- Tablette : 768px - 1024px
- Desktop : > 1024px
- ️ Large Desktop : > 1440px
Approches :
- Mobile First : Design d'abord mobile
- Desktop First : Design d'abord desktop
Responsive vs Adaptive :
- Responsive : Fluide, s'adapte en continu
- Adaptive : Points de rupture fixes
60%+ du trafic web est mobile