我需要幫助為 3 個不同的媒體查詢間隔我的 div

Question

這是帶有程式碼的 codpen 連結： https://codepen.io/gregelious/pen/zYmLGex

這是一個餐廳菜單，有 3 個類別（div）作為 3 個獨立的框架。

（此處的詳細說明：https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md）

這些是說明：

• 當寬度 >= 992 時，每個框應佔據螢幕寬度的三分之一
• 當寬度在 768 和 991 之間時，前兩個框佔據螢幕寬度的 50%，第三個框應佔據下一行寬度的 100%
• 當寬度 < 768 時，每個框佔據寬度的 100%，因此應該有 3 條單獨的行< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

我給了「第一」、「第二」和「第三」的 div id，這是我的 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 課程中收到了這項作業，並重新觀看了有關媒體查詢和其他相關內容的視頻，但沒有取得任何進展。

Answer 1

我建議使用容器 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%;
  }
}

<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>