當頁面的其餘部分響應時，使導航欄響應

我正在爲免費代碼陣營上的項目創建組合頁面，並且我無法使導航欄響應。它基本上是2格;一個用於導航按鈕，另一個用於背景顏色和形狀。我對編碼感到陌生，但在這方面遇到了困難。我使用代碼筆進行編碼，到目前爲止，這是我的代碼。當頁面的其餘部分響應時，使導航欄響應

HTML

<div class="container"> 
    <div id="navigation"> 
     <nav> 
      <ul> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#Portfolio">Portfolio</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </nav> 
    </div> 

    <div id="Border"> 
    </div> 
</div>

CSS

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    text-align: center; 
} 

#navigation { 
    display: block; 
    width:300px; 
    height: 35px; 
    padding:18px 12px; 
    position: fixed; 
    left: 100px; 
    width: 200%; 
    z-index: 22222; 
    transition: all ease .5s; 
} 

#Border { 
    height: 75px; 
    width: 1140px; 
    position: fixed; 
    background: #8e0e17; 
} 

li{ 
    display: inline; 
    padding: 160px; 
} 

ul { 
    list-style-type: none; 
} 

nav li a{ 
    color:grey; 
    font-weight:700; 
    font-size: 25px; 
}

請幫忙，謝謝。

來源

2016-12-15 risingmoon77

你如何看待屏幕尺寸崩潰的導航？傳統上，您必須關閉導航項目或使用類似「漢堡」菜單的菜單，以較小的屏幕尺寸擴展導航。 – mrogers

看到這個http://codepen.io/anon/pen/PqEmgP。它使用CSS媒體查詢規則。這些規則使網頁能夠響應不同的分辨率。

在本例中在768和991像素之間的屏幕中加入兩個規則：

@media (min-width: 768px) and (max-width: 991px) { 
    .navbar{ 
    font-size: 15px !important; 
    } 
    .pull-left>img { 
    height: 65px !important; 
} 
}

這增加了與類中的任何元素=「導航欄」字體大小（信紙尺寸）等於14個像素（之一在屏幕上計數的單位）

.navbar{ 
    font-size: 15px !important; 
}

使響應式網站的另一種方法是使用現成的css規則（它被稱爲庫）。一個着名的是bootstrap嘗試搜索與你的codecamp的好運有點

來源

2016-12-15 22:58:20 partizanos

當頁面的其餘部分響應時，使導航欄響應

回答

相關問題