01
Que signifie responsive ?
Un site responsive adapte sa mise en page à la taille de l’écran sur lequel il est affiché.
Le même contenu peut être présenté différemment sur ordinateur, tablette et mobile.
02
La balise viewport.
Nous avons déjà utilisé cette ligne dans vos documents HTML :
Cette balise indique au navigateur que la largeur de la page doit s’adapter à la largeur réelle de l’appareil.
width=device-width utilise la largeur de l’appareil.
initial-scale=1.0 définit le niveau de zoom initial.
03
Évitez les largeurs fixes.
Imaginez que vous écrivez :
width: 1200px;
}
Sur un écran mobile, cette section pourrait être beaucoup plus large que l’écran.
Une solution plus flexible serait :
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
La section pourra se réduire sur les petits écrans, sans dépasser 1200 pixels sur les grands.
04
Les images doivent aussi être flexibles.
Une très grande image peut déborder de l’écran.
Voici une règle très utile :
max-width: 100%;
height: auto;
}
Ainsi, l’image ne sera jamais plus large que son conteneur et conservera ses proportions.
05
Que sont les media queries ?
Les media queries permettent d’appliquer des règles CSS uniquement lorsque certaines conditions sont remplies.
Par exemple :
h1 {
font-size: 40px;
}
}
Cela signifie :
06
Adaptez votre titre principal.
Dans la leçon précédente, nous avons utilisé un grand titre :
font-size: 64px;
}
Cette taille peut être excessive sur mobile.
Nous pouvons ajouter :
h1 {
font-size: 42px;
}
}
07
Réduisez les espacements sur mobile.
Sur ordinateur, les sections peuvent être très espacées, mais cela peut être excessif sur un petit écran.
Si nous avions :
padding: 90px 30px;
}
nous pouvons adapter ainsi :
section {
padding: 60px 20px;
}
}
08
Passez de plusieurs colonnes à une seule.
Imaginez une section de services sur trois colonnes :
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Sur mobile, nous pouvons passer à une seule :
.services-grid {
grid-template-columns: 1fr;
}
}
Les cartes apparaîtront les unes sous les autres.
09
Adaptez une navigation simple.
Si votre navigation horizontale ne tient plus, vous pouvez temporairement la réorganiser en colonne.
nav {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
Vous pourrez ensuite créer un menu hamburger avec JavaScript, comme celui utilisé sur Digital Ukhti.
10
Utilisez des tailles fluides lorsque c’est pertinent.
CSS dispose d’une fonction très utile appelée clamp().
Par exemple :
font-size: clamp(40px, 6vw, 72px);
}
Elle permet au texte de changer progressivement de taille.
40px est la taille minimale.
6vw est la taille flexible.
72px est la taille maximale.
11
Testez votre site à différentes tailles.
Vous n’avez pas besoin de nombreux appareils physiques.
Les navigateurs disposent d’outils de développement permettant de simuler différentes tailles d’écran.
Ouvrez votre page dans Chrome ou Edge.
Faites un clic droit et sélectionnez Inspecter.
Activez la vue des appareils.
Testez plusieurs largeurs d’écran.
Ne vérifiez pas uniquement un modèle de téléphone. Faites varier la largeur de la fenêtre et observez la réaction du design.
12
Ce qu’il faut vérifier sur mobile.
Aucun contenu ne déborde de l’écran.
Le texte est assez grand.
Les boutons sont faciles à toucher.
Les images ne sont pas déformées.
Les colonnes se réorganisent correctement.
La navigation reste utilisable.
RÉSUMÉ
Ce que vous avez appris.
- Un site responsive s’adapte à la taille de l’écran.
- La balise viewport est essentielle sur les appareils mobiles.
- Évitez les largeurs fixes inutiles.
- Les images peuvent utiliser max-width: 100%.
- Les media queries permettent d’appliquer des styles selon la largeur.
- Les titres doivent s’adapter aux petits écrans.
- Les espacements peuvent aussi être réduits.
- Les grilles peuvent passer de plusieurs colonnes à une seule.
- La navigation doit rester utilisable.
- clamp() permet de créer des tailles fluides.
- Vous devez tester le site à plusieurs tailles.
MISE EN PRATIQUE
Rendez votre site responsive.
Ouvrez le projet construit dans les dernières leçons et adaptez son CSS.
- Vérifiez la présence de la balise viewport.
- Ajoutez max-width: 100% aux images.
- Créez une media query pour 768px.
- Réduisez la taille du h1 sur mobile.
- Réduisez le padding des sections.
- Passez les colonnes à une seule colonne.
- Adaptez la navigation.
- Vérifiez les boutons.
- Testez la page à plusieurs largeurs.