Nous avons l'en-tête de base de la galerie en place, mais il manque les petites personnes bleues qu'Erica a mises dans l'illustration originale. Nous en avions parlé à l'avance et avons décidé que ce serait plutôt cool si, lorsque l'écran était redimensionné, les gens resteraient sur place pendant que le mur de la galerie se déplaçait derrière eux, donc il semble qu'ils parcourent la galerie avec admiration.
Étant donné que les graphiques des personnes sont purement décoratifs, leur utilisation du balisage n'est pas idéale. Heureusement, il y en a deux et nous obtenons deux pseudo éléments gratuits sur chaque élément ( ::beforeet ::after). Nous les utilisons pour les ajouter.
Nous introduisons dans cette vidéo un concept qui continuera à être utile, le concept de «reverso media queries». Nous travaillons en grande partie sur le bureau dans cette conception, donc nos requêtes multimédias sont principalement basées sur max-width. Mais si nous configurons les mêmes requêtes multimédias basées sur min-width, nous ne pouvons cibler l'écran que lorsqu'il est plus grand qu'une certaine taille, pas plus petit.
Dans ce cas, les graphiques des personnes ne tiennent tout simplement pas sur les petits écrans. Nous utilisons donc une requête multimédia inversée pour les charger, de cette façon nous les chargerons sur de grands écrans sur lesquels ils travaillent, mais ne les chargerons pas sur de petits écrans. C'est mieux que de les charger tout le temps et de les cacher sur de petits écrans.