Responsive Design avec CSS
Dans un monde où plus de 65% du trafic web provient des appareils mobiles, savoir créer des sites web adaptatifs n'est
plus une option, mais une nécessité absolue.
Objectif principal Compétences clés
Maîtriser les principes du responsive design et Utilisation des unités relatives, flexbox, media queries
adapter efficacement un site web à tous les types et bonnes pratiques de CSS modernes
d'écrans
1 Naïm KHEDAIJI
Sommaire
01 02 03
Introduction au Responsive Les bases techniques Flexbox & Layout adaptatif
Design Maîtriser les outils essentiels : Créer des structures flexibles et
Comprendre les fondements et viewport, unités relatives et bonnes réactives
l'importance de l'adaptation multi- pratiques
écrans
04
Les Media Queries
Adapter précisément le style selon la taille d'écran
ö Module 1 : Introduction au Responsive Design
Le responsive design est une approche de conception web qui permet à un site de s'adapter automatiquement à la taille
de l'écran de l'utilisateur. Contrairement au design fixe traditionnel, un site responsive s'adapte en fonction du type
d'appareil utilisé : smartphones, tablettes, ordinateurs portables et écrans de bureau.
Pourquoi c'est essentiel ? Concepts clés
Amélioration de l'expérience utilisateur Responsive vs Adaptatif : Le design responsive repose
Meilleur référencement Google (SEO) sur des grilles flexibles (Flexbox ou CSS Grid) et sur des
unités fluides (% , rem , vh , vw), afin que la mise en
Réduction des coûts de maintenance
page s¾ajuste automatiquement à toutes les tailles
Augmentation du taux de conversion
d¾écran, tandis que l'adaptatif propose des layouts fixes
pour des tailles d'écran prédéfinies.
2 Naïm KHEDAIJI
¿ Les bases techniques
1 2
La balise meta viewport Les unités relatives
Cette balise indique au navigateur comment contrôler Ne jamais fixer de largeurs en pixels ! Utilisez plutôt
les dimensions et l'échelle de la page. Elle est des pourcentages ou des unités relatives pour que
absolument indispensable pour tout site responsive. votre layout s'adapte à toutes les tailles d'écran.
% : relatif au parent
rem* : relatif à la taille de police racine
vh/vw : relatif à la hauteur/largeur du viewport
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
D Privilégiez les unités en rem pour les tailles de police, et en % ou vw pour les blocs. Cela garantit une
adaptation optimale à tous les écrans
3 Naïm KHEDAIJI
Comprendre les Breakpoints*
Les breakpoints (ou points de rupture) sont des valeurs spécifiques de largeur d'écran que l'on utilise dans les Media
Queries pour appliquer des styles CSS différents. Ils permettent de définir des moments clés où la mise en page de
votre site web doit s'adapter pour garantir une navigation confortable sur tous les types et tailles d¾écrans. Choisir les
bons breakpoints est crucial pour une stratégie responsive efficace.
320px
1 Représente les petits smartphones, comme l'ancien iPhone SE. C'est souvent la limite inférieure pour la
conception mobile, garantissant un affichage minimal mais fonctionnel.
3753430px
2 Couvre la majorité des smartphones modernes (iPhone 16, Galaxy S24, etc.). Cette plage est cruciale car
elle représente les appareils les plus utilisés par vos visiteurs.
768px
3 Le breakpoint classique pour les tablettes, notamment l'iPad en mode portrait. C'est le seuil où l'on passe
d'une mise en page mobile verticale à un agencement plus complexe.
1024px
4 Idéal pour l'iPad en mode paysage et les petits ordinateurs portables. Les éléments peuvent s'étendre
davantage, et la navigation peut passer d'un menu hamburger à une barre de navigation complète.
1280px
5 Définit les écrans standard de laptop. C'est souvent la taille où la conception de bureau "par défaut"
prend tout son sens, avec des grilles complexes et un contenu plus dense.
1440px+
6 Pour les grands écrans et moniteurs haute résolution. À ces tailles, il est important d'éviter que le
contenu ne s'étire trop et de maintenir une lisibilité optimale en limitant la largeur des conteneurs.
4 Naïm KHEDAIJI
Comprendre les Unités de Mesure en CSS
Unité Basée sur& Exemple Utilisation typique
px Taille fixe en pixels width: 300px; Éléments précis, mais à
utiliser avec parcimonie
pour la flexibilité
% Taille relative à l¾élément parent width: 50%; Mise en page flexible,
dimensions d'éléments
enfants
vw Taille relative à la largeur de la width: 50vw; Sections pleine largeur,
fenêtre (viewport) éléments réagissant au
viewport global
vh Taille relative à la hauteur de la height: 100vh; Sections pleine hauteur,
fenêtre (viewport) ajustement vertical
dynamique
em / rem Taille relative à la taille de margin: 2em; / font-size: Typographie fluide,
police (parent pour em, racine 1.2rem; espacements, pour
pour rem) accessibilité et
consistance
5 Naïm KHEDAIJI
þ Flexbox & Layout adaptatif
Flexbox permet de créer des mises en page qui s¾adaptent naturellement à l¾espace disponible, tout en simplifiant et en
rendant votre code plus facile à maintenir
flex-wrap flex-basis, shrink ou grow gap
Permet aux éléments de passer à la Contrôlent la taille de base, la Crée des espaces uniformes entre les
ligne suivante automatiquement réduction et l¾agrandissement des éléments sans avoir besoin de
quand l'espace manque. Essentiel éléments selon l¾espace disponible. margins complexes. Simple et élégant
pour l'adaptation mobile ! Idéal pour des colonnes flexibles et !
bien équilibrées.
Exemple pratique : 3 card sur une seule ligne
.container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.item {
flex-basis: 33.333%;
min-width: 280px;
}
Ce code crée automatiquement trois colonnes sur grand écran, qui se
réorganisent en une seule colonne sur mobile grâce à min-width et
flex-wrap.
6 Naïm KHEDAIJI
w Les Media Queries
Les media queries permettent d'appliquer des styles CSS spécifiques en fonction des caractéristiques de l'appareil,
notamment la largeur de l'écran. C'est l'outil qui vous donne le contrôle total sur l'apparence de votre site à chaque taille
d'écran.
Desktop Tablette Mobile
Au-delà de 1024px : layout 768px - 1024px : adaptation Jusqu'à 767px : interface
complet avec toutes les intermédiaire avec quelques simplifiée et optimisée pour le
fonctionnalités simplifications tactile
Syntaxe et utilisation
/* desktop */
.menu{
display:flex;
flex-direction: row;
}
/* Mobile */
@media (max-width: 480px) {
.menu {
flex-direction: column;
}
}
Ordre des breakpoints Ou approche mobile-first
Commencez par le desktop, puis
1 Commencez par le mobile, puis
descendez vers le mobile avec 2 montez vers le desktop avec min-
max-width width
Exemples concrets
¦ Attention : Trop de media queries rendent le
Réduire la taille des titres sur mobile code difficile à maintenir.
Masquer le menu secondaire sur tablette
Passer d'un layout 3 colonnes à 1 colonne
Adapter les marges et espacements
7 Naïm KHEDAIJI
Bonnes pratiques
Pensez Mobile-First Utilisez les DevTools Utilisez une grille flexible
Commencez par concevoir pour Les DevTools (touche F12) Préférez des unités relatives
mobile, puis enrichissez permettent de tester rapidement (%, vw, em) aux pixels fixes.
progressivement pour les écrans le rendu sur différentes tailles Utilisez Flexbox ou CSS Grid
plus grands. d¾écran et de simuler des pour adapter les blocs.
appareils mobiles. C¾est le réflexe
Limitez les largeurs fixes qui
à avoir à chaque étape du
<cassentî le layout.
développement.
8 Naïm KHEDAIJI
QUIZZ
WAYGROUND !!
9 Naïm KHEDAIJI