0,46 em
. Даже не думайте! Может, ваши глаза и устанут смотреть на 0,458333333333333
, но именно это число идеально представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют искусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожидать отличный результат.Теперь просто скопируйте это непритязательное число в CSS:
h1 a {
font: bold 0.458333333333333em Calibri, Optima,
Arial, sans-serif; /* 11px / 24px */
color:#747474;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
Посмотрим на результат. Наша страничка закончена, она полностью соответствует желаемому дизайну, а текст задан в масштабируемых единицах
em
(рис. 2.8).
Рис. 2.8. С помощью простой математики мы создали более красивый дизайн – и без всяких пикселей
От гибких шрифтов к гибкой сетке
Вы, наверное, сейчас зеваете со скуки. Здесь ведь должна была быть глава про гибкие макеты, а этот тип Итан все талдычит про математику и размеры шрифтов. Надоело!
Но когда я впервые делал гибкую сетку, я понятия не имел, с чего начинать. Поэтому, столкнувшись с неразрешимой проблемой, я сделал то, что у меня получается лучше всего: полностью ее проигнорировал и начал работать над тем, что знаю.
Когда я понял, как устанавливать размеры текста в единицах
em
, на меня снизошло прозрение: ведь мы можем применять тот же принцип пропорционального мышления и в отношении самих макетов. Другими словами, все элементы нашей сетки – строки, колонки и накладываемые на них модули – могут быть выражены как пропорция содержащихся в них элементов, а не в неизменных, жестких пикселях.И в этом нам снова поможет наша формула
target ÷ context = result
. Идем дальше.Создание гибкой сетки
Представьте, что дизайнер настолько впечатлен вашей быстрой и качественной работой над заголовком, что прислал вам другой макет, и теперь вам нужно написать код для блога сайта Robot or Not (рис. 2.9).
Рис. 2.9. Новое задание – превращение эскиза в гибкий макет
Плюс ко всему дизайнеру настолько понравилась работа, что он прислал краткую схему содержания страницы (рис. 2.10), благодаря чему мы можем не тратить время на планирование. Нужно как-то его отблагодарить.
Рис. 2.10. Схема расположения элементов для нашего блога
Мы можем быстро и ловко перевести его схему в базовую структуру верстки:
Наша разметка получилась простой и аккуратной, семантически верной и превосходно подходит для контента. Мы создали основной контейнер для всей страницы (
#page
), который, в свою очередь, содержит модуль .
blog
. Внутрь него мы поместили еще два блока: один с классом .
main
для главного содержания статьи, а второй с классом .
other
для всего остального. Звучит, конечно, не слишком поэтично, но, с другой стороны, это и не сборник стихов.А теперь пропустим несколько этапов – как это делается на кулинарных шоу, где повар кладет в кастрюлю сырые продукты, а через минуту вынимает из духовки полностью готовую индейку. (Эта метафора прекрасно демонстрирует то, как часто я смотрю кулинарные шоу… или готовлю индейку.)
И все же предположим, что мы уже создали все CSS, связанные со шрифтами, фоновыми изображениями и всеми элементами нашего дизайна, не имеющими отношения к макету (рис. 2.11). Теперь мы можем сосредоточиться исключительно на создании «резиновой» сетки.
Рис. 2.11. Работа над шаблоном закончена! Если, конечно, не принимать во внимание то, как он должен выглядеть в самом конце
Так как же нам превратить эти блоки
.
main
и .
other
в нужные колонки? У нас уже есть схема контента и основная разметка, теперь давайте внимательнее взглянем на физические параметры сетки в оригинальном дизайне (рис. 2.12).
Рис. 2.12. Теперь наша страница основана на сетке!
Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (
12px
). В сумме колонки и промежутки дают нам полную ширину в 960px
. Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.Вот они, детали высокого уровня. И если мы внимательно рассмотрим две колонки в блоге (рис. 2.13), то увидим, что ширина левой основной колонки (
.main
в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной (.other
) – только 331 пиксель.
Рис. 2.13. Давайте-ка изучим детали и измерим ширину внутренних колонок
Что-то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)
#page {
margin: 36px auto;
width: 960px;
}
.blog {
margin: 0 auto 53px;
width: 900px;
}
.blog.main {
float: left;
width: 566px;
}
.blog.other {
float: right;
width: 331px;
}
Отлично. Мы установили ширину
#page
в 960
пикселей, отцентрировали в ней модуль .blog
шириной 900
пикселей, задали ширину.main (566)
и.other (331)
и наконец-то разместили эти колонки рядом. Результат выглядит шикарно (рис. 2.14).
Рис. 2.14. Мы избавились от ненужных пикселей, и наш дизайн почти готов. Или нет?
И хотя наш макет идеально совпадает с оригинал-макетом, он получился совсем негибким. Фиксированная ширина в
960px
делает нашу страницу совершенно безразличной к изменениям размеров области просмотра. Иными словами, если ширина окна будет меньше 1024 пикселей, перед читателем появится полоса горизонтальной прокрутки (рис. 2.15).И нас это, мягко говоря, не устраивает.
Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим
От пикселей к процентам
Вместо того чтобы переносить значения в пикселях из оригинал-макета в CSS, мы должны перевести эти размеры в относительные, пропорциональные значения. В результате мы получим сетку, которая будет трансформироваться в зависимости от области просмотра, причем оригинальные пропорции дизайна останутся неизменными.
Давайте начнем с первого элемента
#page
, который содержит наш макет, и попробуем что-нибудь с ним сделать:
#page {
margin: 36px auto;
width: 960px;
}
Противные, гадкие пиксели. Терпеть их не можем!
Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.
#page {
margin: 36px auto;
width: 90 %;
}
Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента
#page
в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (