Мы убрали свободное перемещение, которое было первоначально задано .logo, и отцентрировали его по горизонтали над меню. Также мы установили text-align: center для .nav-primary, расположив все элементы по центру. Все изменения видны невооруженным глазом (рис. 4.18). Логотип и основная навигация находятся в своих собственных рядах со своими собственными свойствами.
Рис. 4.18. Мы можем полностью перестроить верхнюю часть заголовка, чтобы дать возможность и логотипу, и строке навигации дышать полной грудью
Лично мне нравится, как выглядит навигация, однако расслабляться все равно еще рано. Для элементов навигации осталось не так уж и много места. Фактически, если мы хоть немного изменим размер экрана, наша четкая линия снова сломается, и текст перенесется на следующую строку (рис. 4.19).
(У меня какая-то личная неприязнь к такому тексту. Не знаю почему.)
Рис. 4.19. Слушайте, это уже не смешно
Мы обнаружили еще один проблемный момент, который невозможно исправить, просто передвинув логотип в свой собственный ряд. Значит, давайте напишем еще один медиазапрос и уберем возможность появления такой проблемы:
@media screen and (max-width: 768px) {
…
}
@media screen and (max-width: 520px) {
.nav-primary {
float: left;
width: 100 %;
}
.nav-primary li {
clear: left;
float: left;
width: 48 %;
}
li#nav-rated,
li#nav-contact {
clear: right;
float: right;
}
.nav-primary a {
display: block;
padding: 0.45em;
}
}
Для еще более мелких экранов, с разрешением меньше 520 пикселей, мы передвинули каждый li внутри .nav-primary, присвоив второму и четвертому элементам свойство float: right. В результате мы получили более гибкую сетку 2 х 2, которая подстраивается под изменения размеров области просмотра, в отличие от display: inline (рис. 4.20).
Рис. 4.20. Нужно ли говорить, насколько я доволен результатом? Нет? Тогда не буду
Стоит заметить, что нам не пришлось переписывать правила из предыдущего запроса (screen and (max-width: 768px)) в этот, поскольку, если экран соответствует требованию «уже, чем 520 пикселей», то он автоматически соответствует и требованию «уже, чем 768 пикселей». Другими словами, правила из обоих запросов применяются к самым мелким разрешениям. В результате проблемы могут возникнуть только с областями просмотра шириной менее 520 px.
Вот что у нас получилось (рис. 4.21). Немного доработав детали страницы, мы наконец-то получили дизайн,
Рис. 4.21. Наш отзывчивый дизайн приобретает прекрасную форму, отлично масштабируясь даже на большом экране
Однако отзывчивый веб-дизайн – это не только дизайн, который хорошо смотрится на небольших экранах. При просмотре в максимизированном окне браузера также возникает ряд проблем: картинки растягиваются до невероятных размеров, строчки текста становятся слишком длинными, а сетка выходит за все мыслимые пределы (рис. 4.6–4.8). Следовательно, нам необходимо наложить определенные ограничения на дизайн при помощи свойства max-width, выраженного в em, или пикселях. Давайте думать об этом как о возможности сделать дизайн для другого диапазона разрешений.
Для начала познакомимся с еще одним медиазапросом:
@media screen and (max-width: 768px) {
…
}
@media screen and (max-width: 520px) {
…
}
@media screen and (min-width: 1200px) {
…
}
Первый запрос устанавливает потолок разрешения в 768 пикселей, то есть устройства и окна браузеров, ширина которых превышает ограничение max-width, будут попросту игнорировать вложенный в него CSS. Второй запрос повторяет действия первого, только для диапазона разрешения меньше 520px и при том же ограничении max-width.
