導航欄的跨屏支持

Question

我已經爲我的頁面創建了導航欄，但它不支持多個屏幕我怎樣才能讓它支持它？

HTM：

<section id="container"> 
    <section id="header"> <span id="icon">Icon</span> 

     <input type="text" name="search_box" id="search_box"> 
     <nav id="dropdown_menu"> 
      <ul> 
       <li>dropdown 
        <ul> 
         <li>Item 1</li> 
         <li>Item 2</li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 
     <div class="vertical_bar" style="float: right; margin-right: 3%;"></div> 
     <div id="notifications"> <span id="num_notifs">4</span> 
L</div> 
     <nav id="menu"> 
      <ul> 
       <li>Home</li> 
       <li>Office</li> 
      </ul> 
     </nav> <span id="logo">Website Name</span> 

    </section> 
</section> 

CSS：

#container { 
    width: 100 % ; 
    height: 100 % ; 
    font-family: sans-serif !important; 
} 

#header { 
    height: 5%; 
    width: 100%; 
    background-color: black; 
    color: white; 
} 

#header span, div, input, nav { 
    display: inline-block; 
    vertical-align: middle; 
    box-sizing: border-box; 
    margin: 1%; 
} 

#header#search_box { 
    margin: 0.5% 10%; 
    background-image: url(../img/search_icon.png); 
    background-repeat: no-repeat; 
    background-size: 20px 20px; 

} 

#header#logo { 
    float: right; 
    margin-right: 7%; 
    margin-top: 1%; 
} 

#header#menu { 
    float: right; 
    margin-right: 7%; 
    margin-top: 1%; 
} 

#header#menu ul li { 
    display: inline; 
    margin: 5px; 
} 

#notifications { 
    float: right; 
    margin-right: 7%; 
    margin - top: 0.5%; 
    border: 2px solid white; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    font-weight: bold; 
    text-align: center; 
    padding: 2px; 
    position: relative; 
} 

#notifications#num_notifs { 
    font-size: small; 
    position: absolute; 
    top: 0; 
    left: 80%; 
    background-color: red; 
    border-radius: 50%; 
    width: 15px; 
    height: 15px; 
} 

#header#dropdown_menu { 
    float: right; 
    margin-right: 2%; 
    margin-top: 1%; 
    text-align: center; 
} 

#header#dropdown_menu ul li: hover ul { 
    display: block; 
} 

#header#dropdown_menu ul li ul { 
    display: none; 
} 

#header#dropdown_menu ul li ul li: FIRST-CHILD { 
    margin-top: 10px; 
} 

#header#dropdown_menu ul li ul li { 
    margin-bottom: 10px; 
} 

Answer 1

通過多個屏幕，你的意思是屏幕分辨率/尺寸，對不對？或者你指的是瀏覽器？你將要檢查媒體查詢，這些被用來針對不同的屏幕尺寸..

這些都是我用我的網站媒體的質疑，我跟着Twitter的引導設置seen here：

CSS

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

只要將你的CSS到每個查詢，你應該工作以及..

確保雖則把這個在你的頭上，這將消除與視網膜顯示器的問題：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

編輯：媒體查詢被所有移動設備都支持，reference here.

然而，IE 6-8 不支持他們..快速解決這個問題是使用下面的下面你樣式表：

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> 

這是一種多元的填充，讓IE6-8使用媒體查詢..