我如何使动态标头调整大小？

Question

I want to make header that resizes itself based on the size of the users screen. 我想根据用户屏幕的大小来调整标题。 So far i have an image on the left and a menu on the right. 到目前为止，我在左侧有一个图像，在右侧有一个菜单。 i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image. 我希望菜单的边距从右边开始变小，直到图像开始变小，然后如果菜单变得更小，则菜单在图像下面展开。

Here is the HTML code: 这是HTML代码：

    <body>

<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm"><div id="header_logo"></div></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
        </ul>
    </div>

Here is the CSS code: 这是CSS代码：

#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;

}

#header {
float: left;
width: 100%;
height: 250px;
border: none;
}

#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}

.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}

.navbar li {
float: left;
list-style-type: none;
}

.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}

.navbar li a:hover{
color: #000000; 
background-color:#0040FF;
}

Thank you i would be grateful for any help. 谢谢您，我将不胜感激。

Answer 1

Then I would suggest to either keep the horizontal things in percentage or use css media queries . 然后我建议要么保持水平的百分比，要么使用CSS媒体查询 。

percentage example is here: 百分比示例在这里：

HTML: HTML：

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm" id="header_logo"><img src="images/logo.png" /></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </div>
</div>

CSS: CSS：

#wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#header {
    height: 250px;
}

#header_logo {
    float: left;
    width: 20%;
    margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}

.navbar {
    float: right;
    margin-top: 125px;
    margin-right: 5%;
    text-align:right;
    width: 60%;
}

.navbar li {
    display:inline-block;
    list-style-type: none;
}

.navbar li a {
    display:block;
    padding: 6px 20px;
    text-decoration: none;
    border-right: 1px solid #0040FF;
    color: #0040FF;
    font:bold 15px 'Open Sans', sans-serif;
}

.navbar li a:hover{
    color: #000; 
    background-color:#0040FF;
}

Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/ Jsfiddle： http : //jsfiddle.net/ashishanexpert/kvg4F/

Good luck! 祝好运！

我如何使动态标头调整大小？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-07 20:00:34

我如何使动态标头调整大小？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-07 20:00:34

解决方案1
1 已采纳 2014-01-07 20:00:34