我正在使用Foundation创建一个动态网页。一切都可以顺利地过渡到手机和平板电脑上。然而,我是在1920 x 1080的显示器上创建的。当我在1280 x 1024的显示器上测试时, 我的H1标志和h2标语线断了。
我不确定如何解决这个问题。以下是我的CSS和HTML代码。
/*Header*/
#Header{
max-height:106px;
min-height:105px;
background-color:#666666;
border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color:white;
}
#logo{
max-height:106px;
border-right-width:3px;
border-right-style:solid;
border-right-color:white;
line-height:none;
text-align:center;
background-color:#f58026;
}
#logo h1{
margin-top:10px;
font-weight:400;
font-family:'Gill Sans MT';
font-size:2em;
margin-bottom:0px;
}
#logo h2{
margin-top:0px;
font-weight:500;
font-family:'Myriad Pro' ,Arial;
font-style:italic;
color:white;
font-size:1em;
padding-bottom:15px;
}
<div class="row collapse" id="voipHeader">
<!--Logo-->
<div id="logo" class="large-2 columns small-12 columns">
<h1></h1>
<h2>Your Premier </h2>
</div>
<!--Navigation-->
<div id="navigation" class="large-10 columns small-12 columns">
<ul>
<li><a href="#">Clients</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Inquiry Form</a></li>
</ul>
</div>
</div><!--End Row-->