Отзывчивый веб-дизайн - Страница 6

^{Рис. 2.11. Работа над шаблоном закончена! Если, конечно, не принимать во внимание то, как он должен выглядеть в самом конце}

Так как же нам превратить эти блоки

и в нужные колонки? У нас уже есть схема контента и основная разметка, теперь давайте внимательнее взглянем на физические параметры сетки в оригинальном дизайне (рис. 2.12).

^{Рис. 2.12. Теперь наша страница основана на сетке!}

Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (

). В сумме колонки и промежутки дают нам полную ширину в . Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.

Вот они, детали высокого уровня. И если мы внимательно рассмотрим две колонки в блоге (рис. 2.13), то увидим, что ширина левой основной колонки (

в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной () – только 331 пиксель.

^{Рис. 2.13. Давайте-ка изучим детали и измерим ширину внутренних колонок}

Что-то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)

Отлично. Мы установили ширину

в пикселей, отцентрировали в ней модуль шириной пикселей, задали ширину и и наконец-то разместили эти колонки рядом. Результат выглядит шикарно (рис. 2.14).

^{Рис. 2.14. Мы избавились от ненужных пикселей, и наш дизайн почти готов. Или нет?}

И хотя наш макет идеально совпадает с оригинал-макетом, он получился совсем негибким. Фиксированная ширина в

делает нашу страницу совершенно безразличной к изменениям размеров области просмотра. Иными словами, если ширина окна будет меньше 1024 пикселей, перед читателем появится полоса горизонтальной прокрутки (рис. 2.15).

И нас это, мягко говоря, не устраивает.

^{Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим}

От пикселей к процентам

Вместо того чтобы переносить значения в пикселях из оригинал-макета в CSS, мы должны перевести эти размеры в относительные, пропорциональные значения. В результате мы получим сетку, которая будет трансформироваться в зависимости от области просмотра, причем оригинальные пропорции дизайна останутся неизменными.

Давайте начнем с первого элемента

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

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

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

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

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

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

Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль

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

Теперь вместо величины в пикселях мы должны выразить ширину элемента

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

Из оригинал-макета мы знаем, что ширина нашего блога должна составлять

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

Давайте разделим ширину

() на его контекст ():