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

Я создал навигационную панель для своей страницы, но она не поддерживает несколько экранов, как я могу заставить их поддерживать их?

HTM:

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

 
 <nav id="dropdown_menu">
 <ul>
 <li>dropdown
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 </ul>
 </li>
 </ul>
 </nav>
 
 <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;
}
1 ответ

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

Эти запросы средств массовой информации, которые я использую для моего сайта, я последовал за установку Twitter Bootstrap видел здесь:

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 в каждый запрос, и вы должны хорошо работать.

Обязательно поместите это в свою голову, хотя это устранит проблемы с отображением сетчатки:

EDIT: медиа-запросы поддерживаются всеми мобильными устройствами, ссылка здесь.

Тем не менее, IE 6-8 не поддерживают их. Быстрое решение этой проблемы заключается в следующем:

Это поли-заполнение, которое позволит IE6-8 использовать медиа-запросы.

licensed under cc by-sa 3.0 with attribution.