Отзывчивый веб-дизайн

Изрядный кусок HTML, да? Но по существу мы сделали модуль .welcome, в который поместили изображение и идущий за ним вступительный текст (.main). Изображение, в свою очередь, входит в блок .figure, а сам img заключен в элемент b, который действует как хук для CSS.

Звучит слишком заумно? И я знаю почему. Но элемент b, как бы глупо здесь ни выглядел, на самом деле обрабатывает большой кусок макета. Вот как выглядит соответствующий CSS:

.slides.figure b {

display: block;

overflow: hidden;

margin-bottom: 0;

width: 112.272727 %; /* 741px / 660px */

}

.slides.figure b img {

display: block;

max-width: inherit;

}

Сначала мы задали свойству hidden в элементе b значение overflow, то есть контейнер обрезал любой лишний контент. Теперь же гибкие изображения меняют свои размеры при изменении элемента b. Поэтому мы отменяем масштабирование max-width: 100 % по отношению к изображениям слайд-шоу (max-width: inherit). В результате картинка робота будет попросту обрезана, если ее ширина превысит содержащий ее элемент b.

Как видите, ширина элемента b на самом деле больше 100 %. Мы использовали формулу target : context = result, чтобы создать элемент больше, чем модуль .welcome, благодаря чему изображение немного выходит за рамки с правой стороны.

Как назло, ни один из этих эффектов не будет работать при низком разрешении. Но я везучий парень. Так что давайте кое-что допишем в конце нашего медиазапроса:

@media screen and (max-width: 768px) {

.slides.figure b {

width: auto;

}

.slides.figure b img {

max-width: 100 %;

}

}

Первое правило задает элементу b ширину auto, делая ее такой же, как и ширина его контейнера. Второе правило восстанавливает max-width: 100 %, которое мы обсуждали в третьей главе, позволяя изображению увеличиваться и уменьшаться вместе с контейнером. Вместе эти два правила не позволяют изображению выходить за рамки контейнера, а при расширении – за рамки остальной части дизайна (рис. 4.16). Не знаю, как вы, а я выдохнул с облегчением.

^{Рис. 4.16. Наш рисунок теперь оказался на своем месте. Я испытываю облегчение. А вы?}

^{Рис. 4.17. Поле Contact Us, почему ты нас так ненавидишь?}

И все же, прежде чем мы сможем расслабиться, нам нужно исправить еще кое-что. Навигация в верхней части страницы все еще выглядит сильно сжатой. Кроме того, если хоть немного изменить область просмотра, текст снова переносится на следующую строчку (рис. 4.17).

Разметка шапки довольно простая:

h1 class="logo"

a href="/"

iimg src="logo.png" alt="Robot or Not?" //i

/a

/h1

ul class="nav nav-primary"

li id="nav-blog"a href="#"The #8217;Bot Blog/a/li

li id="nav-rated"a href="#"Top Rated/a/li

li id="nav-droids"a href="#"Droids of the Day/a/li

li id="nav-contact"a href="#"Contact Us/a/li

/ul!– /end ul.nav.nav-primary –

Итак, мы обозначили логотип тегом h1, сделали маркированный список для навигации и присвоили им классы .logo и .nav-primary соответственно. Но что делать с CSS?

.logo {

background: #C52618 url("logo-bg.jpg");

float: left;

width: 16.875 %; /* 162px / 960px */

}

.nav-primary {

background: #5E140D url("nav-bg.jpg"); padding: 1.2em 1em 1em;

}

.nav-primary li {

display: inline;

}

Стили достаточно простые. Мы применили фоновые изображения к обоим элементам, а не к самому макету: мы подвинули изображение влево, чтобы оно перекрывало навигацию. А элементам списка внутри .nav-primary соответствует свойство display: inline. Это решает нашу проблему, по крайней мере, пока страница не становится настолько узкой, что внутренние элементы переносятся на следующую строчку.

Вот как выглядит медиазапрос:

@media screen and (max-width: 768px) {

.logo {

float: none;

margin: 0 auto 20px;

position: relative;

}

.nav-primary {

margin-bottom: 20px;

text-align: center;

}

}