導航欄縮放不正確使用ul

我正在嘗試創建此標題，以便根據瀏覽器大小正確縮放。我已經得到了頭部的比例，現在是剛剛起步的UL（導航欄），相應地擴大，同時保持它的CSS屬性（即懸停背景顏色等）導航欄縮放不正確使用ul

我的繼承人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 */

來源

2013-07-04 Minum

你很親密，你的代碼沒有爲你做什麼？ –

我正在使用雙屏幕，當我的瀏覽器在顯示器尺寸上時，它的工作原理非常完美。當拖到15「時，瀏覽器縮放到合適的窗口，似乎導致導航欄不成比例，而且尺寸更大。 – Minum

您需要使用媒體查詢妥善安排你的元素爲目標設備（我想，這個問題的目標），以及例如，你可以嘗試是把這個在年底你的代碼和調整瀏覽器的大小n小視圖來查看結果：

@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;                

    }                    

}

基本上哪裏告訴瀏覽器時的尺寸調整爲與0像素，以便480像素寬，以改變目標元素的屬性值。您可以根據需要使用盡可能多的媒體查詢，並根據需要更改相應的值。

來源

2013-07-04 02:53:34

導航欄縮放不正確使用ul

回答

相關問題