Поддержка кросс-экрана для навигатора

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

На нескольких экранах, вы имеете в виду разрешение экрана/размеры, не так ли? Или вы имеете в виду браузеры? Вы будете хотеть, чтобы проверить медиазапросы, они используются для различных целевых размеров экрана ..

Эти запросы средств массовой информации, которые я использую для моего сайта, я следовал за твиттер самозагрузки установки 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"> 

EDIT: Медиа-запросы поддерживаются всеми мобильными устройствами, 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 использовать медиа-запросы ..