[CSS] Comment être responsive SANS Media-query 🛑

bonjour à tous et bienvenue on se retrouve aujourd'hui pour faire du CSS on va faire une petite vidéo rapide pour voir les différentes méthodes qui nous permettent d'être responsive sans faire de Mia query donc j'ai listé quatre méthodes qu'on va faire sur un avec un mini projet là extrêmement rapide pas très joli mais c'est pas ça le le but hein le but c'est vraiment de de voir des méthodes pour être responsif donc avec les fontes donc avec la taille des polices avec les images ça sera plutôt un rappel avec le flex comment être responsive avec le flex et comment être responsive avec le grid sans faire de méia query bien sûr puisque en faisant de méia query on peut être responsive aussi très facilement mais là le but est de vous montrer qu'il y a plusieurs méthodes pour que notre texte s'adapte tout seul B par exemple on va commencer avec ce H1 qui est là donc c'est une balise h1 classique si par exemple hop on lui dit comme ça j'aimerais avoir une font size évolutive et bien on pourrait lui dire par exemple tu me fais 2,5 WW WW c'est quoi c'est viewport wid ça veut dire que ça s'adapte à la largeur de notre écran qui est là toute cette largeur là et donc là regardez le texte plus c'est petit plus il rétrécit plus c'est grand plus il s'agrandit alors il y a quand même un petit souci c'est que ben quand c'est vraiment tout petit notre titre il est quasiment illisible et donc ce qu'on pourrait faire c'est qu'on pourrait le limiter à une taille minimum et comment est-ce qu'on fait ça et bien on peut lui dire font size 2,5 c'est bien mais je veux quand même qu'il a une taille minimum et ben on va lui dire tu vas me faire un calque donc Calc on met ça entre parenthèses et donc on va prendre quoi qu'il arrive 2,5 viewport wids mais également on va dire au minimum tu vas faire 20 pixels de taille donc il va ajouter les 2,5 au 20 au 20 pixels donc quoi qu'il arrive ça fera 20 pixels ou plus et là effectivement notre titre il est beaucoup plus cohérent vous voyez plus notre écran s'agrandit plus le titre s'agrandit et c'est cohérent alors attention c'est pas non plus la réponse à tout de de faire cette méthode là puisque le jour où un graphiste vous envoie des maquettes précise avec des tailles en pixel pour du mobile ou pour éventuellement une tablette pour un grand écran pour une télévision euh ben ça ça ne va pas marcher ça sera ça sera pas assez performant d'accord donc là vous serez obligé de suivre ce que vous dira votre votre graphiste mais en tout cas sachez que c'est une technique qui est qui est faisable et qui est pas mal pour faire des des sites assez rapidement pour pour avoir des résultats assez rapides sur un site quand on fait on appelle ça des MVP minimum valuable product ok deuxème solution on a avec les images alors comment est-ce qu'on peut faire pour avoir une image bon ça c'est plutôt un rappel he c'est assez facile mais sans Mia query moi j'aimerais que mon image fasse tout le temps 80 % de ma page donc par exemple là je peux lui dire au li de 600 pixels je vais lui dire tiens j'aim bien que tu fasses 80 % le problème c'est que si la page devient vraiment très grande bah l'image elle peut au bout d'un moment être pixellisé là c'est un peu le cas de celle-ci bon ça se voit pas trop mais je vous je vous le dis c'est une image qui fait de base que 600 pixels elle fait pas plus et donc après ça pourrait être pas très joli donc on pourrait lui dire ok c'est bien que tu fasses 80 % de la page parce que quand je me réduis ben tu te réduis donc là c'est bien on est responsive par contre tu es un peu trop gros ben là on va utiliser simplement des propriétés qui sont assez classiques on va dire max wi je veux qu'au maximum tu fasses 600 pixels parce que j'ai pas envie que tu sois une très grosse image pixelisée et donc à 600 pixels voyez l'image char de grandir en revanche elle peut se réduire autant qu'on a qu'on en a besoin vous voyez là je suis à 150 pixels de largeur donc c'est vraiment extrêmement petit et ben il y a aucun problème ça rentre parfaitement dans mon site ça aussi ça rentre parfaitement dans mon site autre cas que j'aime bien c'est le flex alors le flex attendez si on on agrandit un petit peu là j'ai juste mis des éléments comme ça on va se les mettre en Flex on va voir déjà ce que ça donne donc je vais me placer ici je vais dire DF pour display Flex ok là on voit que ça sort c'est pas du tout ça qu'on veut moi ce que j'aimerais c'est ben c'est que ça aille après à la ligne c'est le le principe du flex en général on peut l'utiliser comme ça pour lui dire ça ben on peut dire Flex wrap j'aimerais que tu me fasses du wrap et là effectivement ça renvoie les éléments à la ligne alors ils se sont placés voilà un petit peu comme ça c'est pas très cohérent pas très joli on a des espaces vides qui sont vraiment pas forcément élégant sur un site à moins que ce soit le designer qui en a envie mais sinon je pense que c'est pas vraiment conseillé donc comment on fait comment on pourrait faire pour avoir ça un peu plus joli ben en fait il y a un attribut extrêmement simple en en CSS c'est-à-dire que quand aux parents on dit tu mets display Flex Flex wrap wrap il y a un attribut qu'on peut donner aux enfants donc là les enfants ce sont bien les lits d'accord donc là c'était unnuel là c'est les lit et cet attribut il s'appelle tout simplement Flex on lui dit Flex 1 et là tous les éléments vont s'adapter à la page et là vous voyez qu'on est sur un remplissage qui est beaucoup plus cohérent et surtout si la taille de notre écran change on a pas besoin de faire média query ils viennent ils viennent se mettre un petit peu bah comme ils peuvent toujours en prenant tout l'espace disponible là voyez bon là il il y en aurait que deux en dessous hop et voilà quand on réduit au fur et à mesure là il y en a plus qu'un de et là il y en a plus qu'un partout là ça casse à ce niveau-là bon c'est pas très grave si ça casse à ce niveau-là puisque là on est à 188 pixels donc on est on est très très bas donc c'est bon c'est c'est vraiment tolérable Mia query on va dire que si vous réduisez à 250 et que votre site tient sur 250 c'est bon vous êtes responsif pour à peu près tous les téléphone portable donc voilà petite petit truc assez intéressant voilà on aurait pu éventuellement c'est vrai que bon des fois là lui il est un peu il est un peu tout seul bon ça on y peut rien on va dire que le flex c'est pas la méthode optimale il y a le il y a le grid qu'on va faire en suivant qui est qui est bien mais par exemple tiens si on avait dit font size on aurait pu éventuellement se faire un calque aussi comme on a fait comme on a fait plus haut on veut dire que de base le texte il fait 2 VW et ensuite on rajoute quoi qu'il arrive 10 pixels voilà comme ça not texte il est un peu plus gros et vous voyez que on est vraiment sur une belle cohérence alors les boutons voyz on n pas sur un grid on n'est pas sur des des cases une grille nette on est sur un flex c'estàdire qu' donne la taille donc chaque mot a vraiment besoin donc vous voyez ça peut être ça peut être sympa en terme de style donc voilà en tout cas on est parfaitement responsive c'est bien et si on est gros voilà voyez que si c'est très gros ça marche aussi donc voilà on n pas fait une seule média querie et pourtant notre site que ce soit en mode desktop ou en mode mobile il est parfaitement responsive et donc le dernier petit truc que je voulais vous montrer euh qui est un truc en en grid c'est vraiment pas mal c'est un truc que j'ai découvert moi il y a pas très longtemps donc comment ça se présente qu'est-ce que j'ai fait là j'ai fait des petites boîtes des petites cases on va dire des vignettes ces vignettes je crois qu'il y en a huit elles sont euh absolument identique et moi j'aimerais qu'elle se répartisse dans la page ben de façon logique bien sûr sans que j' faire aucune média query et puis qu'elle se metent dans l'ordre et voilà si en faut si on peut en aligner 4re qu'on en aligne 4 si on peut aligner que deux qu'on en aligne que deux voilà donc comment est-ce qu'on va faire par ça donc on va dire déjà d j'ai pour display grid donc en disant display grid il se passe rien du tout enfin on croit qu'il se passe rien vrai si je fais inspecter on voit que ici j'ai un grid donc tous mes éléments l euh d'ailleurs oui c'est UL lit ça passe euh ça dépend de la vignette en fait si si dans la vignette on écrit beaucoup de choses en réalité il faut pas forcément utiliser un lit lit c'est vraiment pour lister des petites choses bon ça c'est c'est un peu h sujet là on va dire qu'on a juste besoin de lister des cases de couleur et donc on a notre grille ok comment euh qu'est-ce qu'on va lui dire aussi tiens je vais dire un gap je vaux dire vous mettez entre vous 5 pixels voilà donc là entre chaque case il y aura 5 pixels bon elles sont toujours pas côte à côte vous allez me dire mais pour les mettre côte à côte et ben on va dire un grid template colonne GTC grid template colonne et là ce qui est intéressant c'est qu'on va utiliser l'attribut repeat et on va lui dire et bien j'aimerais que tu me fasses un Autofit Autofit déjà ça annonce la couleur ça dit tu vas prendre tout l'espace disponible et tu vas m'arranger les choses bah de façon cohérente donc Autofit et deuxième attribut qu'on peut donner c'est un min max c'est-à-dire qu'on va donner un minimum et un maximum entre entre parenthèses donc attendez je vais un petit peu agrandir moniteur de code voilà comme ça donc au minimum je vais dire tiens j'aimerais que mes mes petites vigettes F 150 et au maximum ben font ce qu'elles peuvent faire donc c'està-dire une fraction et regardez en disant ça qu'est-ce qui se passe il se passe qu' se m côte à côte mais que c'est pas génial pourquoi c'est pas génial parce que tout simplement là ils ont une Wied qui est forcée à 200 pixels on va se l'enlever cette Wied tac voilà c'est mieux comme ça donc bien sûr faut pas mettre de Weeds aux enfants pourquoi pourquoi faut pas mettre de i enfants mais parce que tout est géré ici par cet attribut là en fait vu qu'on lui dit Autofit si derrière on force une taille en pixel du côté de l'enfant ben ça va pas aller et là effectivement c'est beaucoup alors il y a que H éléments donc ça donne ça mais si notre page devait être plus grande ben vous voyez qu' il s'aligne bien sur la page et surtout si on devait être plus petit sans faire une seule Mia query vous voyez que là il y en a plus que deux on continue de réduire hop là il y en a plus qu'une case et elles sont bien alignées pour mobile et ça veut dire qu'on a pas eu besoin de faire la moindre média query on est responsive sur tout types d'écran alors il aurait pu avoir 40 vignettes comme ça euh ben ça marchait là c'est vrai qu'il y a que huit vignettes donc quand on est vraiment très grand c'est un peu bizarre d'avoir celle-ci qui est toute seule on on va imaginer que bon là c'est pour un cas où il y a beaucoup de vignettes parce que si jamais vous avez qu'une seule vignette là faut faire une média query pour dire bon j'aimerais bien les avoir toutes à ce niveau-là ou alors faire un 4 + 4 d'accord c'est pour ça je vous donne des des éléments mais sachez que la media query c'est quand même utile c'est quand même si on veut être précis c'est un truc qu'onah qu'on est forcé de faire par moment mais en tout cas ce display grid avec le grid template colonne Autofit c'est vraiment pas mal quand vous avez beaucoup beaucoup de vignettes vous êtes responsif comme ça en quelques secondes et voilà vous voyez que notre site là je suis réduit à 200 pixels et il est parfaitement responsive et on a fait zéro Mia query voilà je voulais vous montrer ça et ben si ça vous a plu n'hésitez pas à laisser un like he vous pas obligé bien sûr euh sachez que j'ai aussi des formations si vous voulez aller beaucoup plus loin je vous ai mis ça en dessous de la vidéo donc j'ai mis un lien vers vers toutes mes formation HTML CSS JavaScript on y voit notamment des petites choses comme ça mais on code aussi surtout des des très gros sites ensemble et euh parce que c'est comme ça qu'on progresse aussi donc voilà je vous laisse aller voir ça si ça vous intéresse et puis euh reste plus qu'à vous souhaiter bon code et à bientôt allez ciao