如何使这种响应

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

首先，您的元素的宽度是固定的（300像素为您的块）。所以你需要在屏幕变小时使其“变化”。

所以，你有2个解决方案：

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

所以，如果你希望你的块响应与媒体查询，你可以只需指定一个宽度：

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

正如你可以se e，如果屏幕宽度低于992px （〜从0px到991px）您的元素“hireus-text”的宽度为150px。

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