這是代碼為: https://codepen.io/gregelious/pen/zYmLGex

這是一個餐廳菜單，有3個類別(div)作為3個獨立的盒子。

(這里有詳細說明:https://github . com/jhu-EP-coursera/full stack-course 4/blob/master/assignments/Assignment 2/Assignment-2 . MD)

這些是說明:

當寬度>時；= 992，每個框應該占據(jù)屏幕寬度的三分之一 當寬度在768 & amp前兩個框占屏幕寬度的50%，第三個框應該占下一行寬度的100% 當寬度& lt768，每個盒子占了100%的寬度，所以應該有3個單獨的行 我給出了& quot首先& quot"第二& quot和& quot第三& quot這是我的css:

@media (min-width: 992) {
  div {
    width: 33.33%;
  }
}

@media (min-width: 768) and (max-width: 991) {
  #first, #second {
    width: 50%;
  }
  #third {
    width: 100%;
  }
}

當我調整瀏覽器窗口大小時，div的大小沒有改變，我不知道如何修復它。我從Coursera的一門課程中得到了這個任務，我重新看了媒體詢問和其他相關內容的視頻，但是我沒有取得任何進展。

我建議使用容器div來控制flex布局，如下一個演示所示:

您必須使布局工作，這就是您對flex屬性所做的事情(更新，您需要設置最小寬度和最大寬度屬性的單位，例如px : min-width: 768px)

我還建議從小屏幕到大屏幕(移動優(yōu)先)構建你的布局，并且只設置@media(最小寬度)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%;
  }
}

<h1>Our Menu</h1>

<div class="container">
  <div id="first" class="menu">
    <section>
      <h2>Chicken</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="second" class="menu">
    <section>
      <h2>Beef</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="third" class="menu flow">
    <section>
      <h2>Sushi</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>
</div>

@media值應該用px！

您需要在最小和最大寬度值后加上“px”

@media (min-width: 768px) and (max-width: 991px) {}