如何使這種響應

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這樣的框架，你會發現有時你也需要使用媒體查詢:)！祝你好運