Question

您好，我正在努力使页面具有响应性，并且正在使用媒体查询。我最费力的是要弄清楚为什么减小浏览器大小后我的第二张图像不会改变。

在HTML中，“ top-background-image”设置为该div的背景照片，“ profile-pic”只是该背景照片之上的照片。在常规的全屏模式下，一切看起来都很漂亮，但是无论我对媒体查询中的“个人资料图片”进行什么更改，它都不会改变。

另一个问题，当我将媒体查询更改为“贝克”和“乔”时，即使我具有文本对齐的中心，当减小浏览器大小时，文本也不会在屏幕中居中。

请帮助！：）

这是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屏幕和（最大宽度：900像素）

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

媒体查询无响应的问题

1 个答案: