CSS 媒體查詢在 GRID 中沒有響應

Question

索引.html

這是帶有英雄圖像和英雄內容（標題和副標題）的索引文件

 <section class= 'container main-section grid'>
  <div class="hero-content">
    <div class="title">
      <h1>Hi, I'm Megha</h1>
    </div>
    <div class="subtitle">
      <p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
    </div>
  </div>
  <div class='image-wrapper'>
    <div class='girl-image'></div>
  </div>

styles.css

使用 CSS 網格重疊英雄內容和英雄圖像的代碼。

.grid {
  display: grid; 
  grid-template-columns: 2fr 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
  margin-top: 80px;
  gap: 20px;

}

.hero-content {
 
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
  z-index: 1;
  margin-top: -50px;
  align-content: center;
  max-width: 80vh;
  
}
.hero-content .title {
  font-family: blackjack;
  font-size: 24px;
  color: #16161D;
}

.hero-content .subtitle {
  font-family: futurapt;
  font-size: 22px;
  color: #363636
}
.image-wrapper {
  grid-column: 2/span 3;
  grid-row: 1/span 2;
}

索引.css

用於更改響應式布局的代碼，頂部是英雄內容，底部是圖像。

@media only screen and (max-width: 1249px) {
  
  header, .hero-content, .social-icons, .image-wrapper {
    margin: 0 20px;
  }
}

@media only screen and (max-width: 535px) {
  
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr;
   
  }
   .hero-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    
  }
  .image-wrapper {
    grid-column: 1;
    grid-row: 3 / span 4;
  } 
}

該代碼不適用於最大寬度 535px 的響應式設計。 我已經找了很久了。 任何幫助將非常感激。

基本上我想用單列和 4 行更改移動設備的布局。 這行不通。 為什么？？

Answer 1

我在你的girl-image class 中添加了一點 CSS，這樣我們就可以看到它當前在你的網格中的位置。 您的英雄內容確實會在更高的視口寬度處與您的英雄圖像重疊。 但是在移動設備上，英雄圖片位於您的英雄內容之下。

.girl-image {
  background-color: cornflowerblue;
  height: 100%;
  width: 100%;
}

這是您的移動布局現在的樣子：

如果你的 go 高於 535px，你會得到下圖：

 .grid { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; grid-template-rows: 1fr 2fr; margin-top: 80px; gap: 20px; }.hero-content { grid-column: 1 / span 2; grid-row: 2 / span 2; z-index: 1; margin-top: -50px; align-content: center; max-width: 80vh; }.hero-content.title { font-family: blackjack; font-size: 24px; color: #16161d; }.hero-content.subtitle { font-family: futurapt; font-size: 22px; color: #363636; }.image-wrapper { grid-column: 2 / span 3; grid-row: 1 / span 2; }.girl-image { background-color: cornflowerblue; height: 100%; width: 100%; } @media only screen and (max-width: 1249px) { header, .hero-content, .social-icons, .image-wrapper { margin: 0 20px; } } @media only screen and (max-width: 535px) {.grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 2fr 2fr; }.hero-content { grid-column: 1; grid-row: 1 / span 2; }.image-wrapper { grid-column: 1; grid-row: 3 / span 4; } }

 <section class='container main-section grid'> <div class="hero-content"> <div class="title"> <h1>Hi, I'm Megha</h1> </div> <div class="subtitle"> <p>I'm a software engineer, where I like spending my day with programming and a bit of designing in general.</p> </div> </div> <div class='image-wrapper'> <div class='girl-image'></div> </div> </section>