Pour le moment, tout a l’air parfait quand on regarde notre page sur un navigateur d’ordinateur. Sauf que sur mobile…
Oops. La mise en page reste la même quelle que soit la résolution de l’écran. Pour que l’affichage de notre site s’adapte sur n’importe quel support, nous devons mettre en place des media queries.
Révisez les principes du responsive
Les media queries indiquent au navigateur d’utiliser un ensemble de règles sous certaines conditions. Dans notre cas : en fonction de la taille de l’écran. Si c’est pour un écran d’ordinateur ou une tablette, ou alors si la résolution du navigateur est celle d’un grand écran ou d’un petit téléphone portable. Pour exécuter une media query, on utilise @media, suivi d’un argument et d’une paire d’accolades contenant les ensembles de règles :
@media (max-width: 599px) {
Votre code ici !
}Cette media query signifie que le navigateur appliquera votre code si la largeur du navigateur est inférieure à 600 pixels.
Petit moment culture et vocabulaire, je sais que vous en raffolez ! Les résolutions que vous indiquez pour vos media queries sont appelées des breakpoints.
Pour notre exemple, nous avons créé une media query avec un breakpoint qui appliquera les ensembles de règles spécifiquement adaptés aux écrans plus petits, comme une tablette, voire un téléphone.
Comment ça fonctionne ? La syntaxe CSS standard des media queries consiste à placer un sélecteur et son ensemble de règles directement entre les accolades de la query. Dès que la résolution de l’écran correspond au breakpoint, alors le breakpoint prendra le pas sur l’ensemble de règles par défaut :
// Notre règle par défaut
.intro {
display: flex;
flex-direction: row;
align-items: flex-start;
}
// Notre media query
@media (max-width: 996px) {
.intro {
flex-direction: column;
align-items: center;
justify-content: center;
}
}
Ah ! Alors ce n’est pas encore parfait, mais notez ce qui vient de se passer : lorsque la taille de l’écran n’est plus adaptée et atteint le breakpoint, la propriété flex-direction prend le dessus et ordonne les éléments sur une seule colonne. Au final, cette section est bien plus lisible de cette manière sur petit écran.
Maintenant, dans notre optique d’un code plus lisible et mieux organisé, placer les sélecteurs au sein de la media query signifie qu’ils ne feront pas partie de leurs blocs BEM nestés. Ça nous complique la tâche pour trouver et maintenir les éléments, et ça nous rajoute encoooore du travail d’écriture...
Eh oui, comme toujours, Sass est là pour vous sauver la mise et vous faciliter la vie ! 🤭
Mettez en place les media queries
En CSS standard, les sélecteurs sont placés à l’intérieur de la media query. Sass, lui, vous permet de placer les media queries directement dans les sélecteurs, regardez :
.intro {
display: flex;
flex-direction: row;
align-items: flex-start;
@media (max-width: 996px) {
flex-direction: column;
align-items: center;
}
}Pas mal, non ? Plutôt que de devoir tout séparer, la media query et ses règles sont bien imbriquées dans leur bloc BEM ; du coup, bonus pour nous : comme tout est au même endroit, c’est plus simple à trouver et à modifier.
Comment Sass sait-il quelle media query appliquer ?
Quand Sass compile les media queries, il vérifie le sélecteur dans lequel elles sont imbriquées, puis affiche une media query classique avec le sélecteur nesté dedans :
.intro {
display: flex;
flex-direction: row;
align-items: flex-start;
}
@media (max-width: 996px) {
.intro {
flex-direction: column;
align-items: center;
}
}
Et le tour est joué ! Sass vous aide à gérer les media queries en un rien de temps, et vous offre en bonus un moyen de garder votre code lisible et organisé.
À vous de jouer !
Vous avez vu comment utiliser les media queries avec Sass ; testez vos connaissances et rendez la barre de navigation responsive dans cet exercice CodePen.
Comparez avec la correction dans ce CodePen.
En résumé
Les media queries vous permettent d’adapter votre contenu à différents écrans, en disant au navigateur d’utiliser un ensemble de règles alternatives dans certaines circonstances.
Pour exécuter une media query, on utilise la règle CSS @media, suivie de la liste des queries et d’une paire d’accolades contenant les ensembles de règles alternatives requises.
Avec Sass, vous pouvez nester les media queries, ce qui vous permet de les imbriquer dans le bon bloc BEM.
Vous avez parcouru un sacré bout de chemin, c’est bientôt la fin de ce cours ! Mais pas si vite ! Il faut encore déployer votre code Sass en ligne. C'est ce qu'on va voir dans le prochain et dernier chapitre.
