Question

我正在尝试创建此标头，以便根据浏览器大小正确缩放。我已经得到了标题的缩放，现在它只是让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 */

Answer 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宽的视图时，基本上告诉浏览器更改目标元素的属性值。您可以根据需要使用尽可能多的媒体查询，并根据需要更改值。

导航栏使用ul缩放不正确

1 个答案: