我需要帮助为 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>