Question

我遇到了一个我正在编写的设计问题，我打算创作。现在，我有一个有3个独立区域的标题，中间有一个div，宽度为30％，两边各有35％。在这些我包含我的标题元素。中间的一个包含我的徽标，它可以很好地扩展。当我调整窗口大小时，它缩小并保持它在div内的位置。

当我尝试在任一侧添加导航时出现问题。我当前在第一个div中有导航文本，并且它不像我想要的那样。我有相对定位，并没有保持这种定位。当浏览器重新调整大小时，文本仍然是固定的，所以在某些时候，当div变小时，文本完全在它包含div之外。此外，在某些时候，文本开始堆叠而不是保持它的内联样式。我有一个单独的样式表，有一些字体大小的媒体查询来解决这个问题，他们只是按一定的间隔删除字体大小，但这没有做任何事情。文本变得越来越小，但仍然在重新调整大小时保持固定，并且会爆发并开始堆叠。

我根本无法弄清楚为什么会这样。徽标图像完美地保留在它的div中并保持其位置，而文本根本不移动。我想我只是不理解文本属性以及我需要包含下面的HTML和CSS，我省略了媒体查询，因为它非常自我解释。

<div id=container>

<div id=header>

    <div id=headerone>
        <div id=leftnav>
            <ul>
                <li>Home</li>
                <li>Services</li>
            </ul>
          </div>
    </div>

    <div id=headertwo>
    <img src="images/title.png">
    </div>

    <div id=headerthree>
    </div>


</div>

和CSS

html, body {
    width: 100%;
    height: 100%;
    margin:0;
    font-size: 100%;
    padding:0;
}
img {
    max-width:100%; 
    width: 100%;
}
ul {
    list-style: none;
}
ul li{
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 20px;
}
#container{
    width: 100%;
    height: 100%;
}
#header{
    background-size: auto 100%;
    width: 100%;
    height: 19.1%;
    background-image: url(images/headerbg2.jpg);
}
#header img{
    width: 70%;
    position: relative;
    left: 15%;
    top: 30%;
}
 #headerone{
    width: 35%;
    height: 100%;
    float: left;
    background-color:black;
}
#leftnav{
    word-break:keep-all;
    font-size: 1.5em;
    position: relative;
    left:10%;
    top: 40%;
    font-family:Rockwell Extra Bold, Georgia, "Times New Roman", Times, serif
}
#headertwo{
    width: 30%;
    height: 100%;
    float: left;
}
#headerthree{
    width: 35%;
    height: 100%;
    float: left;
    background-color:green;
}

我感谢任何帮助。

字体打破响应式设计？

0 个答案: