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

您可以使用以下任一选项获得对不同屏幕分辨率的支持：

使用绝对定位
使用 socket.error还可确保行不会错开。
使用CSS3媒体查询也可达到此目的。

我建议使用媒体查询。

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

1 个答案: