简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
我需要幫助為 3 個不同的媒體查詢間隔我的 div
P粉658954914
P粉658954914 2023-09-11 16:53:17
0
1
417

這是帶有程式碼的 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 課程中收到了這項作業，並重新觀看了有關媒體查詢和其他相關內容的視頻，但沒有取得任何進展。

P粉658954914
P粉658954914

全部回覆(1)
P粉805931281
P粉8059312812023-09-12 11:02:18 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%;
  }
}
Our Menu
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！