html - 如何根据父div处理不同屏幕分辨率的文本div

Question

您好，我正在设计一个网站.. 这是网址 https://ifixandrepair.com/ifar/ifixandrepairwellington/

我在 1366*768、15 英寸屏幕上设计了它，你可以在 screenfly 上看到 http://quirktools.com/screenfly/#u=https%3A//ifixandrepair.com/ifar/ifixandrepairwellington/&w=1366&h=768&a=1&s=1

它以我想要的方式给了我完美的结果。但是在更改 13-24 英寸桌面的屏幕尺寸时，我无法处理文本 div 类 .span6，因为我的横幅图像在没有裁剪和挤压的情况下更改了它的大小，我希望此类内容(文本按钮文本框)能够准确地更改大小和位置(它们在 15 英寸屏幕中的相同位置)相应地。 我不想为每个相应的屏幕放置所有媒体查询。我知道绝对位置是真正的原因，但删除它后我无法管理设计。任何建议我都可以妥善处理。

CSS:

.parenthead, .testimonial_header {
background-color: #000000;
padding: 35px;
height: 550px;
}
.masthead .span6 {
position: absolute;
top: 40px;
text-align: justify;
left: 615px;
float: left;
}
.masthead {
color: #fff;
margin-bottom: 40px;
font-size: 18px;
line-height: 30px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
height: 300px;
position: relative;
top: 0px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.masthead p {
color: white !important;
font-size: 15px;
width: 90%;
line-height: 30px;
}
.subscribe {
position: relative;
top: 140px;
width: 80%;
float: left;
left: -15px;
}
.masthead img {
width: 100%
}
#mobile
{
display:none; 
}
@media (max-width: 767px) and (min-width: 200px)
{
#mobile
{
display:block; 
}
#web
{
display:none; 
}

}

HTML:

<div class="parenthead">
<div class="masthead">
<img src="https://ifixandrepair.com/ifar/wp-content/uploads/2016/01/banner_web_1140x476.jpg" id="web">
<img id="mobile" src="https://ifixandrepair.com/ifar/wp-content/uploads/2016/01/banner_1_PNG.png"/>
<div class="container">
    <div class="row">
     <div class="span6">
     <h1>Connect with us!</h1>
     <p>iFixandRepair helps get your mobile device back up and running again, servicing screen replacement, speaker repair, & more on phones, tablets, & computers.</p>
     <div class="social_button">
     <a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" class="btn btn-primary btn-large" target="_blank" onclick="track_event('External Link', 'Facebook Home')">
     <i class="icon-facebook"></i> Facebook
     </a>
     <a href="http://www.twitter.com/iFixandRepairW" class="btn btn-info btn-large" target="_blank" onclick="track_event('External Link', 'Twitter Home')">
     <i class="icon-twitter"></i> Twitter
     </a>
    <a href="tel:+5619078349" class="btn btn-call btn-large">
    <i class="icon-phone"></i> Call Us</a>
    </a>
    </div>
   <div class="subscribe">
   <?php echo do_shortcode( ' [sies_subc_form]' ); ?>
   </div>
   </div>
    </div>
   </div>
  </div>

Answer 1

您可以使用以下任一选项实现对不同屏幕分辨率的支持:

1. 使用绝对定位
2. 使用 display: inline-block 还确保行不交错。
3. 使用 CSS3 媒体查询也可以达到目的。

我建议使用媒体查询。