CSS 301 : Conception web réactive

1. Bienvenue dans CSS 301 : Conception Web réactive: Bienvenue dans le design web responsive, CSS 301. C' est la dernière étape de votre parcours CSS, où vous allez en apprendre davantage sur la conception web réactive et comment produire un site Web qui ressemble à tous les appareils. Dans ce cours, nous allons prendre CSS de base et le changer en fonction de la taille de l'appareil, ce qui consiste essentiellement à appliquer une petite quantité de logique à nos beaux sites Web en utilisant CSS. Donc, vous savez, quand un site Web a une barre latérale sur la vue du bureau, mais ensuite vous réduisez votre navigateur et tout d'un coup les choses disparaissent et les menus apparaissent dans les choses se cachent. C' est la conception web réactive. C' est ce que nous allons faire dans ce cours. Salut, je suis Caleb Italian. Je fais des sites web depuis 20 ans. J' enseigne l'encodage en ligne depuis environ huit ans maintenant. Et aujourd'hui, je vais vous instruire à travers CSS 301, design web responsive. Si vous voulez faire de beaux sites Web qui ont l'air bien sur votre bureau, ordinateurs portables, téléviseurs, tablettes, téléphones, peu près n'importe quel appareil. Alors ce cours est absolument pour vous. Bienvenue sur CSS3 u1 responsive web design. Et j'ai hâte de vous voir dans cette première leçon. 2. L'élément de téléport: Très bien, pour commencer avec la conception web responsive, nous devons vraiment nous assurer que nous avons un méta élément à l'intérieur de notre page HTML. Donc, je vais juste créer un nouveau fichier ici et passe du texte brut au HTML. Et j'utilise le code VS. C' est juste l'éditeur de texte que j'ai choisi. Et si je fais HTML deux-points cinq, et je vais faire cela juste une touche plus grande. Si je fais des deux-points HTML cinq, je vois ce m à l'abréviation. Je peux ensuite appuyer sur onglet et il me donne tout ce dont j'ai besoin. Il me donne le langage HTML, ce qui est agréable. Il me donne UTF-8 pour l'encodage des caractères, ce qui vous permet d'avoir des choses comme emojis sur votre page. Et puis nous avons cette ligne, et c'est la plus importante. Le méta nom est égal à viewport. Le contenu est égal à la largeur, est égal à la largeur de l'appareil et l'échelle initiale est 1. C' est important. On veut garder ça exactement comme on le voit. Et ce que cela fait, c'est qu'il permet à notre navigateur de dire, d' accord, donc ça va être une page réactive. Donc, si vous avez des pages sur lesquelles vous travaillez, sites Web sur lesquels vous travaillez et que vous voulez les rendre réactifs. Assurez-vous d'ajouter ceci à la section d'en-tête de votre page sur chaque élément HTML ou élément, mais chaque HTML, assurez-vous que vous avez ceci sur chaque fichier HTML point que vous avez. Et cela vous assurera que votre CSS agit comme nous le voulons avec un design web réactif. 3. Syntaxe de la requête de médias: Ok, jetons un oeil à la syntaxe des requêtes de médias. Donc, ce que je peux faire ici, c'est que nous pouvons le faire dans un style interne avec l'attribut style ou non attribuer l'élément. Ou nous pouvons le faire à l'intérieur de CSS externe. Je vais le faire à l'intérieur de ce document afin que vous puissiez voir exactement ce que je fais avec le HTML et CSS côte à côte. Donc, typiquement, nous choisirons un élément comme notre corps. Et on pourrait dire que la couleur de fond va être bleue. Et sauvegardons cette page comme index.html. Et le mien change toujours ici. Revenons au HTML normal, pas aux modèles Django. Et donc cela va nous donner, l'élément corps, corps va avoir une couleur de fond de bleu, k. Ça va être laid, mais ça va être une bonne démonstration. Alors passons à un navigateur. J'utilise juste Chrome ici. Je peux passer à Fichier, Ouvrir le fichier, sélectionner mon index.html. Nous avons un fond bleu k. C'est assez moche, mais il a le point en face. Maintenant, ce que je peux faire est d'inspecter avec un clic droit. Et votre panneau pourrait sembler un peu différent du mien. Je pense que le mien est en mode sombre. Et ça va être mon décor quelque part. Paramètres. Paramètres, paramètres. Oui, le thème, sombre, la lumière nécessite un rechargement. Je ne veux pas recharger, mais oui, tu peux le changer là si tu veux. Donc, ce que cela fait est de nous permettre de cliquer sur ce petit bouton ici, qui bascule la barre d'outils de l'appareil. Et cela va changer la largeur de notre page. Et cela rend notre page réactive. Et donc c'est beaucoup comme réduire votre navigateur à gauche et à droite, mais cela le fait effectivement correctement, donc il devient un peu plus précis de cette façon. Nous pouvons aussi dire responsive, mais aussi hey, essayons comme un iPhone ou un iPad Pro ou des choses comme ça. Et il va automatiquement le dimensionner pour nous. Ou nous pourrions faire juste responsive et une largeur régulière ici. Donc, la plupart des choses se basent. conception Web la plus réactive fonctionne à partir de la largeur de votre appareil, et non de la hauteur. Et allons de l'avant et réinitialisons ceci à 100%. C' est énorme et rendons ça plus petit. Donc d'accord, rien ne se passe ici. La conception web réactive est quand nous disons que lorsque la largeur de l'appareil est une certaine largeur, soit plus grande que, plus petite que ou entre deux tailles, changer cette couleur d'arrière-plan. Et donc ça ressemble beaucoup à ça sur les supports, largeur max. Et alors quelle largeur voulons-nous lui donner ? Disons 640 pixels. Et puis nous pouvons aussi dire ici. Donc, nous enveloppons une requête multimédia autour de plus de CSS. Faites en sorte que ce corps ait une couleur de fond rouge. Et donc à 640 pixels et moins, parce qu'il va avoir une largeur maximale, nous avons appris que NCSS à 1640 pixels et moins va changer cette couleur de fond en rouge. Alors allons de l'avant et actualisons cette page et responsive. Allons de l'avant et passe à 641. Rien, 640 devient rouge. Et on peut voir quand je traîne ici. Maintenant, c'est un très bon exemple. C' est un exemple laid, mais c'est un très bon exemple de design web responsive. Jetons donc un coup d'oeil à cette syntaxe une fois de plus. J' ai mon style habituel ici. Ce que je veux normalement arriver, ça pourrait être sur le corps, pourrait être sur les cours, les idées. Vous choisiriez Par Attributs, tout ce que vous voulez. C' est votre CSS régulier qui monte ici. Et puis en dessous, nous faisons des crochets de médias, la largeur maximale, la largeur que vous voulez, accolade, puis votre CSS régulier ici et puis terminons cette accolade bouclée. Et nous pouvons en fait effondrer cela aussi. Donc ça ressemble un peu plus à ça. Et nous venons de mettre notre CSS ou CSS régulier à l'intérieur de là. 4. Qu'est-ce que le mobile d'abord ?: Ok, jetons un coup d'oeil à ce qu'est le mobile en premier. Vous voyez beaucoup de gens qui disent d'abord le mobile. Eh bien, d'abord, qu'est-ce que le mobile d'abord ? Mobile d'abord signifie que vous faisiez un site Web à, pour fière allure sur votre téléphone d'abord. Donc, ce que j'ai fait ici, c'est que j'ai stylé ça basé sur absolument aucune règle. Et nous savons s'il n'y a pas de règle de requête média que ce style ici va juste être appliqué. Couvertures sur chaque type d'appareil, chaque largeur d'appareil. Et puis ce que j'ai dit, c' est que quand cette largeur maximale est de 640 pixels ou moins, c'est ce que la largeur maximale signifie. Alors, changez ça. Mais Mobile First est l'idée de faire cela à l'opposé. Donc mobile d'abord dirait, hé, rendre ce fond du corps rouge. Ensuite, avec une largeur minimale de 640 pixels, changez cette couleur d'arrière-plan en bleu. Et donc tout ce qu'on fait ici, c'est de l'inverser. On dit tout le temps, rendre cette couleur de fond rouge. Et puis sur une largeur minimale et jusqu'à 640 pixels et plus changer cette couleur d'arrière-plan en bleu. Donc, de cette dernière vidéo à cette vidéo, je vais rafraîchir cette page et nous allons voir que rien ne se passe réellement. Alors rendons ça plus grand. Et il reste bleu. Et puis nous le rendons plus petit, plus petit, plus petit. Et quand on descend à 640, on voit qu'il passe au rouge. Et ça fait exactement la même chose que ce qu'on a fait avant. Seulement nous permutons où nous écrivons nos codes disaient, hé, tout ici doit être pour mobile d'abord. Et puis sur une largeur minimale et un haut, nous voulons réellement que cette couleur change. Et maintenant, nous écrivons le code pour les téléphones d'abord et nous ajustons pour un bureau. Alors que dans la dernière vidéo, nous avons écrit code pour un ordinateur de bureau ou une tablette ou quelque chose de grand. Et puis on a dit, hé, en fait quand cette minute, quand la largeur de la page est assez petite, change-la. Et donc l'un est le bureau d'abord, l'autre est le mobile d'abord, et c'est le mobile d'abord. Vous allez souvent voir des gens dire que c'est mieux. Honnêtement, vous allez voir plus de gens écrire bureau d'abord css plus que vous allez écrire un, plus que vous allez voir des gens écrire CSS mobile d'abord. 5. Images réactives: Jetons un coup d'oeil à la façon de rendre une image réactive, car par défaut, ils ne sont pas vraiment tout aussi réactifs. Et alors, allons de l'avant et ouvrons un nouvel onglet et allons sur un Splash.com. Et cherchons une sorte de peinture. Bien sûr, assez bien. Ce que je vais faire ici, c'est que je vais cliquer avec le bouton droit de la souris. Copiez cette image. Non, copiez l'adresse de l'image, pas l'image, mais l'adresse de l'image. Et puis je peux ouvrir ça dans mon navigateur. Et nous avons cette image. Cool, ça marche, c'est ce que je veux dans notre HTML. Allons de l'avant et ajoutons une image. Donc on n'a pas d'image ici. La source Img sera quelle que soit cette URL et que, tout ça, tout ça, tout ce qu'elle va peindre. Quand je retourne à ma page ici, je vois cette image. Et cette image n'est vraiment pas réactive tant que la page devient pas trop grande et qu'elle devient réactive. n'est pas toujours ce que nous voulons réellement avec la conception web responsive, la plupart du temps, ce que nous voulons est de dire que cette image sera comme 50% de la largeur tout le temps. Et donc cela signifie même en ce moment, 50%, eh bien, il est clairement pas 50, 50% pour cent serait quelque part par ici. Cela devrait toujours diminuer, mais ce n'est pas le cas, il ne rétrécit pas jusqu'à ce qu'il atteigne réellement la largeur maximale de la fenêtre. Même alors, il ne reconnaît pas vraiment qu'ils sont censés être une frontière, pas une bordure, mais un rembourrage ou une marge autour du corps sur le côté droit. Donc les choses deviennent un peu bizarres ici. Et nous pouvons, nous pouvons améliorer ce travail avec une image réactive. Donc, ce que nous pouvons faire, c'est changer notre corps, nous pouvons changer notre IMG. Et nous pouvons donner à cela une largeur de, disons, 100% et une hauteur d'auto. Et ça va juste calculer la hauteur pour nous. Maintenant, nous ne voulions pas 100%, nous voulions 50%. Et faisons juste ce plus grand rafraîchissement. Et vous pouvez voir que cette image est devenue plus petite et qu'elle reste à 50 %, c'est juste au milieu de ce X, je crois. Donc, si nous allons tout droit, nous pouvons voir que c'est 50% et qu'il va rester là peu importe la taille des pages, ça va rester là. Et c'est donc réactif. Maintenant, ce que nous pouvons faire, c'est que nous pouvons rendre cela encore plus réactif. Et nous pouvons dire, lorsque la page a une largeur maximale de 640 pixels, nous pouvons la faire 100% de largeur. Maintenant, je t'ai peut-être perdu là-bas. Donc, dans la dernière leçon, nous avons parlé d'abord du développement web responsive, mobile first. Mélangons et assortissons ça un peu. Alors maintenant, faisons les médias. Largeur maximale, 640 pixels. Donc c'est beaucoup comme ça, mais exactement le contraire. Donc, la syntaxe est la même, mais cela dit à partir de 640. C' est dire à partir de 640 vers le bas. Sélectionnez cette image et donnez-lui une largeur de 100%. Maintenant, parce que nous savons comment CSS fonctionne de haut en bas, nous pouvons dire, sélectionner cette image, lui donner une largeur de 50%, lui donner une hauteur automatique, fermer cette image. Nous n'avons pas besoin de spécifier la hauteur automatique ici parce que tout ce que nous faisons est de remplacer cette largeur ici. C' est tout ce que nous écrasons est d'hériter automatiquement de la hauteur de l'auto. Donc, c'est beaucoup comme écrire. La hauteur est Auto. Mais notre navigateur va hériter cela de toute façon du code de la ligne 13 ici, donc nous n'avons pas besoin d'écrire cela. Allons de l'avant et sauvegardons, rafraîchissons et regardons cela. Chaque fois que la page passe en lecture, l'image devient pleine largeur. Donc 505050, cinquante zéro cent pour cent, tout le chemin vers le bas. Et maintenant, nous avons une image vraiment réactive. 6. Ajouter des contenus réactifs: Bienvenue de retour. Parlons des intégrateurs réactifs. Donc, dans cette vidéo, nous allons prendre une vidéo, un iframe, et nous allons la rendre réactive. Maintenant, voici le truc, c'est quand nous allons sur Youtube et nous cliquons sur Partager et nous obtenons ce code d'intégration. Ce n'est pas réactif par défaut. Et si je retourne à notre page et qu'on la jette sous notre image, HR. Et allons coller ça. On va voir qu'il a une largeur, un codé en dur avec une hauteur de 5-6, codée en dur de 315. Et puis un tas d'autres trucs que nous n'avons pas vraiment besoin de savoir. Le SRC est le principal ici. Voici notre vidéo YouTube. Alors continuons et actualisons cette page et faisons défiler vers le bas. Et nous avons cette vidéo. Maintenant, disons que nous voulons que ce soit réellement pleine largeur. Ce que nous pouvons faire cela en disant la largeur est égale à un 100%, mais alors nous devons trouver un 100%. Quelle est cette hauteur ? Quel est ce rapport d'aspect ? Tout le temps, nous devons trouver ce rapport d'aspect sans arrêt. Et on ne peut pas faire ça. Mais ce qu'on peut faire, c'est écrire des maths intelligents pour le faire pour nous. Et donc je vais resserrer ça pour qu'on puisse nous voir tous sur une seule ligne. Maintenant, déplacez ça vers le haut. Iframe va aller au-dessus l'image et le HR va aller à l'iframe. Alors allons de l'avant et minimisons ceux-ci. Maintenant, ce que nous voulons faire ici, et c'est un peu un truc CSS, c'est que nous voulons envelopper un conteneur autour de cela. Et donc j'appelle habituellement ça un conteneur et un conteneur iframe, quelque chose comme ça. Et vraiment, nous avons juste besoin de pouvoir sélectionner ce conteneur et sélectionner l'iframe en même temps. Et donc ce qu'on veut faire ici c'est qu'on voulait prendre ce conteneur et qu'on lui donne une position relative et qu'on cache le débordement. Nous avons appris à propos de la position relative et cacher le débordement et la largeur, ce que nous allons utiliser ensuite, tout NCSS, un à un NCSS à O1. Donc, vous devriez être familier avec ceux-ci déjà. Allons-y et attrapons ce conteneur. Et disons que la position est relative et que le débordement va être caché de cette façon, nous ne montrons rien qui soit en dehors de cette boîte. Donnons à cela une largeur de 100%. Cela va être toute la largeur de notre iframe. Donc, au lieu de dire, Hey, respect avec la 560, on va finalement dire que ça fait une largeur de 100% de notre page. Maintenant, c'est là que nous devenons un peu difficiles. On va dire rembourrage, haut est 50, non, 56 points 2-5 pour cent. Et ça va devenir un peu bizarre. Et la raison pour laquelle nous faisons ça c'est parce que si nous disons 16 par 9, donc si nous allons 16 divisés par 9, non, c'est l'inverse. Donc si on dit 16 par 9, c'est censé être neuf divisé par 16, on obtient 0.5625. Ou si on multiplie ça par 100, on obtient 56,25. Et donc c'est juste un peu de mathématiques de base juste là. Nous avons donc pris neuf divisé par 16, c'est notre rapport d'aspect, ou 16 par neuf. Et puis il nous a donné une décimale et ensuite nous avons dit fois par 100 pour nous donner le nombre réel. C' est notre pourcentage. Ça va nous donner un haut de 56,25 %. Maintenant, ce que nous voulons faire est de sélectionner cet iframe, et nous n'avons pas toujours accès à cet iframe. Donc, ne lui donnons pas une classe ou un ID ou quoi que ce soit, mais disons n'importe quel conteneur qui a un I-Frame à l'intérieur. On pourrait dire position absolue, haut 0, gauche 0, bas 0, droite 0. Et cela va juste l'étirer tout le chemin à travers. Ceci, qui a également un rembourrage supplémentaire sur le dessus de la tête comme un rembourrage de 16 par neuf sur le dessus. Juste pour une bonne mesure, allons de l'avant et donnons à cela une largeur de 100% et une hauteur de 100%. Techniquement, cela ne sera pas nécessaire, mais ça ne fait pas mal de l'avoir là-dedans. Allons de l'avant et sauvegardons cette page et revenons à Google. Et quand nous rafraîchissons, non seulement l'iframe va être en haut, mais il va prendre toute la largeur de cette page. Alors rafraîchissons et découvrons ce qu'il fait ici. Regardez cette énorme, énorme vidéo. Et donc nous pouvons rendre cela réactif en faisant ce bonjour, bonjour, bonjour, bonjour responsive, intégrer, vidéo YouTube responsive, ce qui est vraiment sympa. Donc, en fait, ce que cela fait ici est de créer un peu d'une belle démonstration. Donc, nous avons eu un site de bureau laid en ce moment. Mais si nous faisons défiler vers le bas jusqu'à la vue mobile où l'arrière-plan devient rouge, les choses commencent à cliquer ensemble et ça commence à paraître un peu plus agréable. Et c'est exactement ce que nous voulions faire. Nous voulons que la mise en page de notre site change, pour la plupart avec quelques bits et bobs ici dedans. Nous voulons que ces choses changent en fonction de la largeur de votre appareil. 7. Plusieurs requêtes de médias: D' accord, jetons un coup d'oeil à plusieurs requêtes multimédias. Alors allons de l'avant et créons une nouvelle boîte. Et ça va être appelé Box et on ne va pas faire quoi que ce soit avec. Et HTML interne, créons une boîte et ici me donne cette abréviation m, claquez cette touche de tabulation et nous avons une boîte. Donc, disons que cette largeur va être de 400 pixels, la hauteur va être de 400 pixels. Il va y avoir une bordure de dix pixels, marge noire solide, marge, marge, marge 50 pixels et auto. Donc c'est une ligne qui est au centre. Et nous allons changer la couleur de fond, changer énormément la couleur de fond, le sport, et c'est ennuyeux. Changeons le rayon de la frontière. Et il va avoir un rayon de frontière de rien par défaut. Donc maintenant, ce que nous pouvons faire est que nous avons écrit ces requêtes de médias, une pour la largeur min, une pour la largeur maximale. On peut les assembler. Nous pouvons dire ajouter des médias. Disons une largeur maximale de cent dix cents pixels et une largeur minimale de, disons 700 pixels. Et puis on pourra sélectionner cette boîte à nouveau. Et nous pouvons changer ce rayon de frontière à 50%. Donc, cela va transformer cette boîte en cercle chaque fois que la largeur est comprise, pas 100, mais faisons 11000 pixels et une largeur min-700. Donc, entre sept cent dix cents pixels, ce sera un cercle. À chaque fois. Cela n'aura pas ce rayon de frontière. Donc ça va ressembler à un carré. Allons de l'avant et actualisons, ouvrez Chrome, actualisez notre page. Et nous avons cette boîte. Alors faisons ça. Donc on est à 537 en ce moment. Si on monte à 700 et que l'on fait défiler lentement jusqu'à 700, on va voir oui, 700 changements dans un cercle. Et puis ça va aller jusqu'à 1000. Et puis une fois qu'il frappe 1000 va changer de 1000 à un carré. Donc, cela veut dire à tout moment que cette largeur réactive ici est entre 1700, faites-en un cercle. Maintenant encore une fois, c'est un exemple laid, mais c'est un exemple puissant pour vous montrer que vous pouvez utiliser max-width et min-width ensemble. 8. Créer une présentation réactive: Ok, travaillons avec quelque chose de réel. Nous devons créer une sorte de mise en page et rendre réactive parce que ce que nous avons fait jusqu'à présent est amusant. C' est cool, mais ce n'est pas vraiment tout ce qui s'applique dans des pièces individuelles. Ce que nous voulons faire maintenant est de créer une sorte de mise en page flexbox et fondamentalement changer de sorte qu'il, quand il est vu à partir d'un téléphone, il s'accroche bien ensemble. Alors allons de l'avant et créons un nouveau fichier. Appelons ce point flexbox HTML. Et nous le changeons d'un modèle Django à un modèle HTML. Et faisons HTML deux-points cinq. Et ça nous donne ça. C' est exactement ce qu'on veut. Et allons de l'avant et créons une sorte de mise en page HTML ici. Donc, nous avons une sorte de conteneur appelé notre grille ou notre disposition de numéro de mise en page parce que ce sera un ID. Et disons que nous avons un ID pour la navigation NAV ici. Un autre ID pour la barre latérale, la barre latérale ici, et un autre ID pour le contenu, le contenu ici. Maintenant, cela va ressembler à n'importe quoi à ce stade parce que nous n'avons pas appliqué de CSS. Allons de l'avant et appliquons un peu de CSS. Utilisons la flexbox. Vous pouvez également, au lieu d'utiliser flexbox, utiliser Grid. Je vais utiliser flexbox parce que c'est un peu plus populaire de nos jours. Mais la grille est aussi une bonne pratique. Donc, si vous êtes à la recherche une bonne pratique, je dirais, hey, essayez ceci avec flexbox et après cette vidéo, essayez aussi avec grille. Alors allons de l'avant et sélectionnez cette mise en page. Et disons que ce sera le flex d'affichage. Et on va s'assurer que ça s'enroule. Et nous avons également appris à propos de flexbox et CSS 201. Donc vous devriez être un peu familier avec ça, mais je vais le prendre lentement et juste au cas où vous ne l'êtes pas. Flex rap, on va dire envelopper. Et ce que cela va faire, c'est au lieu de faire tous ces côte à côte, disons, hey, quand ces éléments sont trop larges pour la page, croquez-les sur une nouvelle ligne. Et donc passons ici, réutilisez cet onglet Fichier, Ouvrir un fichier, point flexbox HTML, et nous ne voyons rien d'utile. Cependant, ceux-ci sont côte à côte, donc il fait quelque chose d'utile. C' est juste que nous n'y sommes pas encore. Allons de l'avant et sélectionnez ce nav par son ID. Maintenant, donnons-lui une base flexible de 100%. Donnons une frontière à ça. En bas. Un pixel solide, ajoutez un OCC, voyez quelque chose comme ça. Ce n'est peut-être pas assez sombre. Aaa un peu plus sombre. Et rafraîchissons. Ok, donc la navigation est là-haut. C' est ça fait tomber les choses maintenant parce que comme nous l'avons dit, la base flexible est un 100%. Faisons cette barre latérale. Donnons cette largeur de 20%. Alors allons de l'avant et sélectionnez la barre latérale en utilisant flexbox. Et nous, encore une fois, nous n'utilisons pas la largeur de votre base de mauvaises herbes flex. Donc, la base flexible va être 20% et la bordure droite va être un pixel solide. Faisons correspondre à la navigation AAAA. Ok, et ça se rassemble bien. Et puis le contenu va juste étendre le reste de la page. En fait, ce n'est pas le cas par défaut. Mais on peut le faire agrandir le reste. Alors allons de l'avant et sélectionnons le contenu et donnons à cela une base flexible de 100% moins 20%. Donc ça prend 100 % de la page, pas 100. On veut 80% là-dedans. Et juste pour que nous sachions où nous travaillons pour border un pixel, rouge solide. Et tu m'as vu faire ce pixel beaucoup. Oh, ok, donc ça tombe en fait dans une chose intéressante. Cela l'a cogné sur une nouvelle ligne. Ce que nous avons oublié de faire, et nous avons appris à ce sujet et CSS à U1 aussi était de tout sélectionner. Et disons que le dimensionnement de la boîte doit être border-box. Et ça va juste le remettre là-dedans. Et ce que ça a fait, c'est que ça disait, hey, il y a cette boîte rouge. Il a une largeur de 80% plus un pixel de chaque côté. Pour cette frontière. Qu'est-ce que Border-Box a fait ? Boîte à border-taille de la boîte. Il est dit, en fait, que vous êtes 80%, y compris cette frontière. Donc, avec la bordure, il est 80% et puis juste une sorte de l'a cogné dedans parce que c'est la disposition de précision de pixel. C' est maintenant qu'il y a un peu de retouche. Disons que le corps doit être parce que je veux juste que ça ait l'air un peu décent. Le corps a besoin d'un rembourrage de 0, marge de 0. Et la navigation devrait avoir un rembourrage de 20%. Non, non, 20 pixels, pas 20 %. On y va. Voyez la même chose avec cette barre latérale et voyez à quoi ça ressemble. air assez bien et ils voient la même chose avec le contenu. Ok, donc on a une sorte de mise en page là-bas. Donnons à cette barre latérale et au contenu une bordure inférieure. Donc barre latérale et le contenu. Et tout ce que j'ai fait là était dans VS Code, j'ai cliqué à un endroit et puis je l'ai fait, j'ai fait un clic de commande dans un autre. Je crois sur Windows. C' est vous cliquez à un endroit, puis c'est alt clic à un autre endroit. Et nous pouvons faire la frontière. En bas. AAA solide d'un pixel. Ok, cool. Donc, nous avons une sorte de mise en page ici. Quand nous rendons cela réactif. Ça va, ouais, ça ne marchera pas comme on s'attend à ce que ça marche. Ce n'est pas tout à fait là, ça devient un peu bizarre et c'est tout à fait attendu. Mais ce que nous pouvons dire à, disons 640 pixels, et nous pouvons faire en sorte que cette barre latérale couvre réellement toute la largeur et que ce contenu descend juste un peu. Et donc on peut dire à Media, et je vais faire avancer ça. Donc, vous pouvez voir que sur mon écran à la largeur maximale du média 640 pixels, sélectionnons cette barre latérale. Et donnons-lui une base flexible de 100%. Et supprimons ce taux de frontière. Le taux à la frontière sera de 0. Et nous allons également saisir cette section de contenu qui a une base flexible actuellement de 80% et lui donner une base flexible d'un 100 aussi bien. Donc ça va le faire tomber. Et donc ce que nous pouvons faire ici, parce que c'est fondamentalement le même code. Choisissons les deux. Et rendons ça un peu plus grand, rafraîchir. Et quand je fais ça un peu plus petit, on peut voir qu'il glisse vers le bas et on peut voir comment il se trouve dans sa propre ligne. C' est vraiment sympa, c'est le développement web réactif en un mot. Maintenant, nous pourrions aller encore plus loin avec ça. Allons de l'avant et faisons cela juste un peu plus zoomé. Maintenant, ce que nous pourrions faire avec cela, c'est quand nous arrivons à, disons que 480 est bon et je dis 480 pixels, cela devient un peu plus petite taille d' appareil à 470 cinq est en fait le vice que l'EIIL utilisera, utilisera cela. Cachons la barre latérale. Donc, maintenant, nous pouvons créer une autre requête média à la largeur maximale des médias 475 pixels. Prenons juste cette barre latérale et n'en afficherons aucune. Cachons-le complètement. Et donc je vais rafraîchir la page où il pour 80 en ce moment. Et si j'allais cliquer ici et juste flèche vers le bas, flèche vers le bas, flèche vers le bas, flèche vers le bas. Et il se cache. Vous pouvez voir que je passe entre 476 et 75, et ça se cache pour moi, ça fait exactement ce qu'on voulait faire. Maintenant que mon ami est le développement web réactif. En bref, c'est vraiment tout ce que c' est, quand vous faites une page plus petite ou plus grande, vous allez cacher quelque chose et vous allez essentiellement faire quelque chose, prendre plus de place, moins de place, ou le cacher, ou peut-être montrer si c'est seulement supposé apparaître sur mobile. 9. Votre projet: Votre projet sera avec flexbox ou grid. Vous pouvez utiliser l'un ou l'autre, celui que vous connaissez le plus. Ce que j'aimerais que vous fassiez, c'est que vous partiez de cette dernière leçon. Mais je veux que vous créiez une sorte de mise en page. Utilisez la grille flexbox ou CSS, selon laquelle vous êtes le plus familier. Et puis assurez-vous que vous avez une navigation. Vous avez une barre latérale et vous avez du contenu là-dedans. Et puis lorsque vous réduisez votre page en largeur lorsque vous utilisez développement web responsive ou que le basculement responsive dans votre navigateur. Ce bouton ici, quand vous utilisez ceci et que vous faites votre page plus grande ou plus petite, je veux que vous le fassiez réellement pour que je devienne plus grand. Donc, cela ne prend pas 20% mais un 100%, puis cacher quelque chose. Fondamentalement, je veux juste que vous jouiez avec le développement web responsive, mais l'utilisation de cette mise en page comme exemple est un très bon exemple, vraiment bon usage du développement web responsive. Alors allez-y et donnez un coup de feu et n'hésitez pas à référencer n'importe quel code ici. Vous pouvez mettre cette vidéo en pause à tout moment et vous pouvez jeter un oeil à ce que j'ai écrit. Allez-y et donnez-lui un coup de feu. Amusez-vous avec elle aussi, et il n'a pas besoin d'être disposé exactement de la même façon que je l'ai fait. Vous pouvez l'étaler comme vous le souhaitez. Amusez-vous un peu avec elle, faites-le votre. Mais surtout, assurez-vous d'avoir un peu d'expérience sous votre ceinture avant de terminer ce cours avec des requêtes média. 10. Résumé: Bonjour, bienvenue, et aussi félicitations pour avoir terminé ce cours, CSS 301, responsive web design. C' était un parcours assez petit. La majeure partie du CSS est vraiment d'apprendre, vous savez, des choses comme n'afficher aucun ou une bordure, n'est-ce pas ? 0. C' est ce qu'on appelle des déclarations. Tout ce que nous avons fait avec la conception web responsive, c'est que nous avons dit, hey, ajouter cet élément méta là-dedans qui indique au navigateur que cela va être une sorte de page responsive avec CSS. Et puis nous avons dit, oui, une sorte de requêtes médiatiques, une logique conditionnelle. Donc, lorsque la page a une largeur maximale de 640, il est donc 640 ou moins. Appliquez le style, ou si c'est pour 70 et moins, appliquez ce style. C' est vraiment tout ce que c'est. Et c'est donc la conception web réactive en un mot. Merci d'avoir pris le temps de suivre ce cours. J'espère que ça vous a plu. J' espère que vous avez appris quelque chose de nouveau. J' espère que vous avez eu un peu de plaisir avec la conception web réactive. C' est une chose vraiment, vraiment importante à savoir. N' oubliez pas, vous pouvez toujours demander de l'aide pour apprendre à coder le groupe Facebook. Vous pouvez également me suivre sur Instagram au codage pour tout le monde, ou sur Caleb Italian, ou sur Twitter sur Caleb tell. Ou vous pouvez même me suivre ici sur le partage de compétences. Et vous pouvez simplement aller à mon profil et cliquer sur suivre. Et puis vous pouvez voir chaque fois que j'ai un nouveau cours et que j'ai produit beaucoup de cours ces derniers temps. Donc, j'espère que vous obtiendrez un bon rapport qualité-prix, à votre abonnement premium de partage de compétences. Encore une fois, merci d'avoir suivi mon cours. Je m'appelle Caleb Colleen. Ce fut un plaisir de vous enseigner Responsive Web Design. J' espère vous voir un autre de mes cours, mais si je ne suis pas heureux de coder et de m'amuser là-bas.