Отзывчивый веб-дизайн - Итан Маркотт

Давайте начнем с первого элемента #page, который содержит наш макет, и попробуем что-нибудь с ним сделать:

#page {

margin: 36px auto;

width: 960px;

}

Противные, гадкие пиксели. Терпеть их не можем!

Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.

#page {

margin: 36px auto;

width: 90 %;

}

Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента #page в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (рис. 2.16). И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5 %.

Рис. 2.16. Наш контейнер изменяется в размерах при любом изменении размера окна браузера

Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль .blog. Чуть ранее, когда мы играли с пикселями, то установили следующее правило:

.blog {

margin: 0 auto 53px;

width: 900px;

}

Теперь вместо величины в пикселях мы должны выразить ширину элемента .blog в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула target ÷ context = result.

Из оригинал-макета мы знаем, что ширина нашего блога должна составлять 900px. Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента .blog. Поскольку блок .blog вложен в элемент #page, ширина которого в соответствии с оригинал-макетом составляет 960 пикселей, это и есть наш контекст.

Давайте разделим ширину .blog (900) на его контекст (960):

900 / 960 = 0,9375

У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем 93,75 % и заносим их прямо в CSS:

.blog {

margin: 0 auto 53px;

width: 93,75 %; /* 900px / 960px */

}

(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины (width). Это, разумеется, дело вкуса, но я нахожу это очень полезным.)

Итак, с двумя элементами мы разобрались. Но что делать с колонками?

.blog.main {

float: left;

width: 566px;

}

.blog.other {

float: right;

width: 331px;

}

Ширина основной колонки, которая расположена слева, составляет 566px, ширина же левой колонки равна 331px. Эти цифры нам тоже придется перевести в проценты. Но прежде чем подставить их в формулу, обратите внимание на то, что контекст изменился. Последний раз мы делили ширину модуля .blog на 960, ширину его контейнера (#page). Но поскольку эти блоки вложены в .blog, нам нужно делить целевую ширину колонок (566 и 331) на ширину их нового контекста, то есть ширину .blog (900). В результате мы получаем:

566 / 900 = 0,628888889

331 / 900 = 0,367777778

Передвинув запятую на два знака, мы получаем в итоге 62,8888889 % для блока .main и 36,7777778 % для блока .other:

.blog.main {

float: left;

width: 62.8888889 %; /* 566px / 900px */

}

.blog.other {

float: right;

width: 36.7777778 %; /* 331px / 900px */

}

Вот мы и получили гибкий макет (рис. 2.17). При помощи небольших расчетов мы создали контейнер, выраженный в процентах, и две гибкие колонки, что дает нам макет, меняющий свои размеры в соответствии с размерами окна браузера. При этом ширина в пикселях тоже меняется, а пропорции дизайна остаются исходными.

Рис. 2.17. Наша гибкая сетка готова

Гибкие поля и отступы

Теперь, когда две колонки стоят на своих местах, можно сказать, что мы закончили с основными компонентами нашей гибкой сетки. Изумительно. Замечательно. Великолепно. И все же этого недостаточно: нас ждет работа над деталями.

Не продохнуть…

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

(Конечно, на самом деле мы без них страдаем.)

Рис. 2.18. Наш заголовок отчаянно нуждается в полях

Рис. 2.19. Отступы? Мы не признаем никаких отступов!

Рис. 2.20. Согласно параметрам эскиза, нам нужно задать горизонтальное поле в 48 пикселей с левой стороны заголовка

Ну что ж, давайте начнем с заголовка. В оригинальном макете между началом заголовка и левым краем контейнера есть промежуток в 48 пикселей (рис. 2.20). Мы, конечно, могли бы задать поле (padding-left) в пикселях или em:

.lede {

padding: 0.8em 48px;

}

Это хорошее решение. Но это фиксированное значение левого поля (padding-left) создаст промежуток, который не будет сочетаться со всей «резиновой» сеткой. И когда гибкие колонки будут становиться у́же или шире, это поле проигнорирует остальные пропорции дизайна, и ширина его всегда окажется 48 пикселей (48px), независимо от того, насколько уменьшился или увеличился весь макет.

Так что мы не пойдем этим путем – мы создадим гибкий отступ. Пока что мы использовали относительные единицы измерения только в отношении ширины различных элементов, но мы можем это сделать и с полями и отступами. И воспользуемся для этого нашей проверенной формулой:

target ÷ context = result

Прежде чем мы снова займемся вычислениями, хочу обратить ваше внимание на то, что контексты для гибких полей и для гибких отступов немного отличаются.

1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента.

2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента. Подумайте о «боксовой» модели, и эти предложения обретут смысл: мы описываем поле в отношении к ширине самого элемента.

Поскольку мы хотим определить поле заголовка, в качестве контекста мы возьмем ширину самого элемента .lede. Ширина заголовка нам неизвестна, поэтому мы берем ширину модуля блога, то есть 900 пикселей. Снова открываем калькулятор и получаем:

48 / 900 = 0,0533333333

и переводим результат в:

.lede {

padding: 0.8em 5.33333333 %; /* 48px / 900px */

}

Наши 48 пикселей поля теперь выражены в относительных единицах измерения, как доля ширины заголовка.

С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка .blog содержит модуль. article, а правая .other – список .recent-entries (рис. 2.21).

Рис. 2.21. Взглянув на колонки, мы можем достаточно быстро определить их ширину

Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (231px) и ширину содержащей ее колонки (331px), поэтому можем просто отцентрировать модуль по горизонтали:

.recent-entries {

margin: 0 auto;

width: 69.7885196 %; /* 231px / 331px */

}

Со статьей (модуль .article) мы можем поступить так же. Но давайте-ка попробуем кое-что другое.

Помните поле шириной 48px, которое мы задали в заголовке? Наша статья находится в той же колонке (рис. 2.22), поэтому вместо того, чтобы размещать ее по центру контейнера, создадим еще один пропорциональный промежуток.

Рис. 2.22. У заголовка и статьи одинаковые поля

Целевое значение – 48px. А поскольку мы работаем с относительным полем, в качестве контекста берем ширину самой статьи. Но, опять же, мы не знаем точной ширины модуля .article, поэтому используем ширину блока .blog, то есть 566px:

.article {

padding: 40px 8.48056537 %; /* 48px / 566px */

}

Вуаля! Гибкая сетка закончена (рис. 2.23).

Рис. 2.23. Гибкие поля и отступы! Ура!

Немного отрицательных значений

Давайте обратим внимание на заголовок даты записи в блоге.

Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной 69px (вернемся к рис. 2.12). А поскольку дата входит в блок статьи шириной 474px, мы уже знаем и контекст.