Responsive Design
avec CSS
M. Atezong Ymele Carick A.
Software Engineer | LLM Engineer | AI trainer
Objectifs
● Ce qu’est le responsive design
● Pourquoi il est indispensable
● Utiliser les unités flexibles (%, vw, vh, fr…)
● Utiliser les Media Queries
● Créer des mises en page responsive avec Flex & Grid
● Réaliser des TPs concrets (header, sections, grille de projets)
C’est quoi le responsive design ?
Le responsive design = faire en sorte que votre site s’adapte automatiquement :
● À la taille de l’écran
● Au type d’appareil (mobile, tablette, PC)
● À l’orientation (portrait / paysage)
NB: Offrir une expérience confortable partout.
Pourquoi c’est indispensable ?
● 75% des visiteurs consultent depuis un smartphone
● Un site non responsive = inutilisable
● Google privilégie les sites responsive
● Votre Portfolio doit être lisible sur mobile
● Tous les principaux frameworks (Bootstrap, Tailwind) utilisent ce principe
Comment rendre un site responsive ?
03 outils principaux :
1. Les unités flexibles
○ % (pourcentage)
○ vw / vh (viewport width / viewport height)
○ fr (unités flexibles pour Grid)
2. Les Media Queries
○ Changer le style selon la taille de l’écran.
3. Flexbox et Grid, qui s’adaptent naturellement
Pratique | Les unités flexibles
Pourcentage :
Largeur de l’écran (vw) :
Pratique | Les unités flexibles
Unité flexible Grid :
Introduction aux Media Queries
Une Media Query est une règle CSS qui s’active seulement à certaines tailles d’écran.
NB: Si l’écran est plus petit que 600px, on applique ce style.
Breakpoints standards
Ce sont les tailles d’écran les plus courantes :
● ≤ 600px ⇒ Mobile
● 600px - 900px ⇒ Tablette
● ≥ 900px ⇒ Desktop
Exemple d’utilisation :
Pratique | rendre un bloc responsive
Résultat :
● Sur PC : largeur de l’élément
= 400px
● Sur mobile : largeur de l’
élément prend toute la largeur
de l’écran ou du container.
Pratique | Responsive avec Flexbox
Changer la direction selon l’écran :
Résultat : Sur mobile, les colonnes deviennent des lignes.
Pratique | Responsive avec CSS Grid
Grid rend le responsive beaucoup plus simple :
Résultat : Résultat :
● S’adapte automatiquement
● Nombre de colonnes variable selon l’écran
● Pas besoin de media queries !
Pratique | Intégration responsive Flex
Pratique | Intégration responsive Grid
Ressources utiles
Ressource Lien
[Link]
CSS
erence