0

我正在尝试创建此标头，以便它根据浏览器大小正确缩放。我有标题的缩放，现在它只是让 UL（导航栏）相应地缩放，同时保持它的 css 属性（即悬停背景颜色等）

这是我的 HTML：

<body>
<div id = "container">
    <div id = "header">
        <img id = "logo" src="SLS LOGO.png" />
            <div id = "navbar">
                <ul id = "tabs">
                    <li><a href = "#"> Home </a></li>
                    <li><a href = "#"> Gallery </a></li>
                    <li><a href = "#"> Calender </a></li>
                    <li><a href = "#"> About</a></li>
                    <li><a href = "#"> Members</a></li> 
                </ul>
            </div>
     </div>
</div>

和CSS：

#container  {
width: 70%;
height: auto;
margin: auto;
}

                /* Start Header */
#header {
width: 100%;
height: auto;
margin: auto;
margin-top: 2%; 
background: white;
height: 201px;

}

#logo   {
float: left;
width: 40%;;
margin-top: 2%; 
height: 80%;
}

#navbar {
float: right;
width: 60%;
height: 100%;
}

#tabs   {
margin: 0; 
padding: 0;
list-style: none;
text-align: center;
height: 100%;
}

#tabs li    {
display: inline;    
}

#tabs li a  {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
padding: 5%;
width: 10%;
float: left;
color: #999;
font-weight: 400;
line-height: 141px;
height: 141px;

}

#tabs li a:hover    {
color: #333;
background: #F0F0F0;
border-bottom: thin blue solid;
}

            /* End Header */
4

1 回答 1

1

您需要使用媒体查询为目标设备正确安排元素（我猜这个问题的目标），您可以尝试的示例是将其放在代码的末尾并将浏览器调整为较小的视图以查看结果：

@media screen and (min-width: 0) and (max-width: 480px){                                              

     #logo, #navbar, #tabs, .tabs li a {                                         

         float:none;                                                                                  
         width:100%;                                                                                  

     }                                                                                                
     #tabs li{                                                                   
         display:block;                                                            

     }                                                                           
     #tabs li a{                                                                 
         width:100%;                                                             
         height:100%;                                                            
         display:block;                                                            

     }                                                                             

 }

基本上在哪里告诉浏览器在调整为 0px 到 480px 宽的视图时更改目标元素的属性值。您可以根据需要使用尽可能多的媒体查询，并根据需要更改值。

于 2013-07-04T02:53:34.667 回答