媒体查询没有响应的问题

Question

您好，我正在努力使我的页面响应并使用媒体查询。我很难弄清楚为什么当我减小浏览器尺寸时我的第二张图片不会改变。

在 HTML 中，'top-background-image' 被设置为 div 的背景照片，而 'profile-pic' 只是该背景照片之上的一张照片。在常规的全屏模式下，一切看起来都非常漂亮，但无论我对媒体查询中的 'profile-pic' 进行何种更改，它都不会发生任何变化。

另一个问题，当我将媒体查询更改为“baker”和“joe”时，即使我的文本居中对齐，当浏览器尺寸减小时，文本也没有在屏幕中居中。

请帮忙！ :)

这里是 HTML:

  <div >
      <div >
      <img className="top-background-image" src="**image1.jpg**" alt="background-image"/>
      </div>
      <div className = "top-container">
      <h1 className = "joe animate__animated animate__fadeInLeftBig ">Hi, I'm Joe.</h1><span><h2 className="baker animate__animated animate__fadeInRightBig animate__delay-1s" >a baker for you.</h2></span>
      <img className ="profile-pic animate__animated animate__fadeInUpBig animate__delay-2s"src="**image2**.jpg" alt="profile"/>
      <a className = "scroll" href="#middle-container"><FontAwesomeIcon className="social-icon" icon={faAngleDoubleDown} bounce size = '2x' color = "white"/></a>
      </div>
    </div>

这里是 CSS:

    .top-background-image {
  position: relative;
  filter: blur(4px);
  -webkit-filter: blur(4px);
  width: 1600px;
  height: 800px;
  margin-bottom: 10px;
} 

      .top-container {
      display: flex;
      justify-content: center;
      text-align: center;
    }


   .joe {
  font-family: "Droid+Sans";
  font-weight: normal;
  color: #ffffff ;
  font-size: 7rem;
  position: absolute;
  top: 17%;
  left: 32%;
}

.baker {
  font-family: 'Satisfy', cursive;
  font-weight: normal;
  color: #ffffff;
  position: absolute;
  top: 37%;
  right: 21%;
}

.profile-pic { 
  display: inline-block; 
  height: auto; 
  width: 250px;
  border-radius: 50%;
  position: absolute;
  top: 48%;
  left: 43%;
  margin: auto;
  display: block;
  
}

它在媒体查询中....

@media (max-width: 900px){

 .top-background-image {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    width: 100%;
}

      .joe {
        font-size: 3.5rem;
        margin: 0 auto;
      text-align: center;
        
      }
    
    .baker {
      text-align: center;
      margin: 0 auto;
      font-size: 1.5rem;
     
    }
    
      .profile-pic {
        display: block;
        margin: 0 auto;
        width: 150px;
      width: 150px;
      }

}

Answer 1

在摆弄之后，我自己找到了答案。事实证明，在我的情况下，我需要在@media 之后添加 'screen and' 以使其看起来像这样：

@media 屏幕和 (max-width: 900px)

从那里开始，我不得不稍微调整一些东西，但现在效果很好。希望这对以后的人有所帮助。

媒体查询没有响应的问题

Troubles with media queries not responding

html

css

media-queries

reactjs