Question

我想让这个响应。每当我调整窗口大小时，一切都会中断。

.first-about {
  margin-left: 220px;
}

.home-about1 {
  margin-top: 10px;
  position: relative;
}

.home-about1 .fa {
  border-width: 1px;
  border-radius: 50%;
  font-size: 30px;
  padding: 30px;
  float: left;
  margin-right: 220px;
  position: relative;
  z-index: 2;
  background-color: #ff4000;
  box-shadow: 0px 0px 0px 10px white;
  color: white;
}

.hireus-text {
  position: relative;
  top: -30px;
  margin-left: 10px;
  border-width: 1px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 300px;
  height: 150px;
  text-align: center;
  padding-top: 60px;
  float: left;
  z-index: 1;
  background-color: #31708f;
  color: white;
  letter-spacing: 1px;
  font-weight: 700px;
}

.hireus-text1 {
  background-color: #31708f;
  margin-left: 110px;
}

.hireus-text2 {
  background-color: #a73641;
}

.hireus-text3 {
  background-color: #298067;
}

.hireus-text4 {
  background-color: #8a5d0f;
}

.hireus-summary1 {
  background-color: #31708f;
  margin-left: 110px;
}

.hireus-summary2 {
  background-color: #a73641;
}

.hireus-summary3 {
  background-color: #298067;
}

.hireus-summary4 {
  background-color: #8a5d0f;
}

.clear {
  clear: both;
}

<div class="home-about1">
  <div><i class="fa fa-users first-about" aria-hidden="true"></i></div>
  <div><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
  <div><i class="fa fa-line-chart" aria-hidden="true"></i></div>
  <div><i class="fa fa-money" aria-hidden="true" style="margin-left: -10px;">
    </i></div>
  <div class="clear"></div>
  <div class="hireus-text1 hireus-text">
    <h2>FRIENDLY SUPPORT</h2>
  </div>
  <div class="hireus-text2 hireus-text">
    <h2>DETAILED REPORTING</h2>
  </div>
  <div class="hireus-text3 hireus-text">
    <h2>VERIFIED RESULTS</h2>
  </div>
  <div class="hireus-text4 hireus-text">
    <h2>COMPETITIVE PRICE</h2>
  </div>
  <div class="clear"></div>
  <div class="hireus-summary1 hireus-summary">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique
      posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p>
  </div>
  <div class="hireus-summary2 hireus-summary">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique
      posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p>
  </div>
  <div class="hireus-summary3 hireus-summary">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique
      posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p>
  </div>
  <div class="hireus-summary4 hireus-summary">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique
      posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p>
  </div>
  <div class="clear"></div>
</div>

Answer 1

首先，您的元素宽度是固定的（块的300px）。因此，当屏幕较小时，您需要对其进行“更改”。

所以你有2个解决方案：

使用框架（如Bootstrap）
使用media queries

因此，如果您希望您的块能够响应媒体查询，则只需指定宽度：

@media screen and (max-width: 991px) {
    .hireus-text {
        width: 150px;
        font-size: 14px;
    }
}

如您所见，如果屏幕宽度低于992px （〜从0px到991px），您的元素“hireus-text”的宽度将为150px。

所以我真正的答案是，如果你想做一些反应，你需要学习不同的方法来做到这一点。如果你使用像Bootstrap这样的框架，你会发现有时你也需要使用媒体查询:)！祝你好运

如何做出这种反应

1 个答案: