CSS 媒体查询在 GRID 中没有响应

Question

index.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;
}

index.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;
  } 
}

该代码不适用于最大宽度为 535 像素的响应式设计。我已经找了很久了。任何帮助将不胜感激。

基本上我想用单列和 4 行更改移动设备的布局。这行不通。为什么？？

Answer 1

我已在您的 girl-image 类中添加了一些 CSS，以便我们可以看到它当前在您的网格中的位置。您的英雄内容确实会在更高的视口宽度处与您的英雄图像重叠。但在移动设备上，英雄图片位于您的英雄内容下方。

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

这是您的移动布局现在的样子：

如果你超过 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>