Voici le lien codpen avec le code : https://codepen.io/gregelious/pen/zYmLGex
Il s'agit d'un menu de restaurant avec 3 catégories (divs) réparties en 3 cases distinctes.
(Instructions détaillées ici : https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)
Voici les instructions :
J'ai donné les identifiants div pour "premier", "deuxième" et "troisième" et voici mon CSS :
@media (min-width: 992) { div { width: 33.33%; } } @media (min-width: 768) and (max-width: 991) { #first, #second { width: 50%; } #third { width: 100%; } }
La taille du div ne change pas lorsque je redimensionne la fenêtre du navigateur et je ne sais pas comment y remédier. J'ai reçu cette mission d'un cours Coursera et j'ai revu la vidéo sur les requêtes multimédias et d'autres éléments connexes, mais je n'ai fait aucun progrès.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je recommande d'utiliser un conteneur div pour contrôler la disposition Flex, comme indiqué dans la démo suivante :
Vous devez faire fonctionner la mise en page, c'est ce que vous utilisez
flex属性所做的事情（更新，您需要将单位设置为min-width和max-width属性，例如px:min-width: 768px)Je recommande également de créer des mises en page qui s'adaptent aux petits et grands écrans (mobile d'abord) et de configurer uniquement
@media (min-width)requêtes CSS. Considérez que ce n’est que si une requête multimédia plus grande est définie que la requête multimédia plus grande écrasera la requête plus petite précédente.Voici une démo fonctionnelle :
body { margin: 0; padding: 0; } h1 { text-align: center; } div { float: left; } section { background-color: gray; border: 1px solid black; margin: 10px; } section h2 { background-color: blue; border: 1px solid black; margin-top: 0px; padding-top: 0px; padding-bottom: 2px; padding-right: 30px; padding-left: 30px; display: inline; float: right; } section p { clear: right; padding: 0px 10px 10px 10px; } /** added code */ .container { display: flex; flex-wrap: wrap; } .menu { width: 100%; } @media (min-width: 768px) { .menu { width: 50%; } .flow { width: 100%; } } @media (min-width: 992px) { .menu, .flow { width: 33.333%; } }