CSS媒体查询未在GRID中响应

问题描述

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

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

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

解决方法

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

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

这是您现在的移动布局：

如果您超过535像素，则会得到以下图片：

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