Créer une interface responsive permet d’assurer une expérience utilisateur optimale sur tous les types d’appareils, qu’il s’agisse de grands écrans de bureau, de tablettes ou de smartphones. Voici comment ajouter des styles CSS pour rendre notre page de recette responsive.
Étape 1 : Ajouter une condition Media Query
Les media queries permettent d’appliquer des styles spécifiques en fonction de la taille de l’écran. Ajoutons une media query pour les écrans de 768 pixels de large ou moins (taille typique des tablettes et smartphones).
Pour rappel, la déclaration d’une media query se fait ainsi :
@media (max-width: 768px) {
/* On insère ici les sélecteurs et leurs attributs à modifier lorsque la condition est remplie - A savoir ici tant que la résolution est inférieure à 768px */
}Étape 2 : Appliquer les styles pour les petits écrans
Pour créer une interface en 1 colonne unique, il va simplement falloir faire en sorte que les blocs remplissent 100% de la largeur ; ainsi voici ce que vous pourriez ajouter dans vos paramètres CSS lorsque l’interface passe en mode « mobile » :
/* Media Query pour les petits écrans */
@media (max-width: 768px) {
body {
padding: 10px;
}
section {
margin: 10px 0;
flex-basis:100%;
}
figure {
margin-top: 10px;
}
header,
footer,
section,
figure {
margin: 10px 0;
padding: 15px;
}
}Quelques explications sur les modifications d’attributs :
- Mise en place d’une marge interne (padding) pour le <body> à 10px : Réduire le padding du body permet d’utiliser plus efficacement l’espace disponible sur les petits écrans.
- Mise en place d’une marge externe (margin) pour les sections à 10px 0 : permet d’ajouter des marges verticales (haut et bas) pour séparer les sections empilées et améliorer la lisibilité.
- Mise en place d’un flex-basis à 100% pour les sections : permet au bloc d’occuper tout l’espace disponible (c’est ce qui permet de passer en 1 colonne grâce à flexbox)
- Pour le reste, on ajoute simplement quelques marges internes et externes afin d’améliorer la lisibilité globale de la page.
Au final, avec ces quelques règles toutes simple et la magie de flexbox, vous devriez avoir un résultat similaire à celui-ci :
Un dernier ajustement : à vous de jouer
Maintenant je vous propose une petite « colle » : j’aimerais que l’image passe juste sous le titre de la page (donc avant la section « ingrédients »). Comment faire en ajoutant 1 seule propriété CSS dans ma feuille de styles ?
Je vous laisse chercher 🙂
