Hier ist der Codpen-Link mit dem Code: https://codepen.io/gregelious/pen/zYmLGex
Dies ist ein Restaurantmenü mit 3 Kategorien (Divs) als 3 separate Boxen.
(Detaillierte Anleitung hier: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)
Das sind die Anweisungen:
Ich habe die Div-IDs für „erster“, „zweiter“ und „dritter“ angegeben und das ist mein CSS:
@media (min-width: 992) { div { width: 33.33%; } } @media (min-width: 768) and (max-width: 991) { #first, #second { width: 50%; } #third { width: 100%; } }
Die Größe des Div ändert sich nicht, wenn ich die Größe des Browserfensters ändere, und ich weiß nicht, wie ich das Problem beheben kann. Ich habe diese Aufgabe aus einem Coursera-Kurs erhalten und mir das Video zu Medienanfragen und anderen damit zusammenhängenden Dingen noch einmal angeschaut, habe aber keine Fortschritte gemacht.
我建议使用容器 div 来控制 Flex 布局，如下一个演示所示：
您必须使布局正常工作，这就是您使用
flex属性所做的事情（更新，您需要将单位设置为min-width和max-width属性，例如px:min-width: 768px)我还建议构建从小屏幕到大屏幕的布局（移动设备优先），并仅设置
@media (min-width)css 查询。请考虑，仅当设置了较大的媒体查询时，较大的媒体查询才会覆盖之前的较小查询。这是一个工作演示：
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%; } }