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

Представьте на мгновение, что вы – разработчик пользовательских интерфейсов. (Если вы и так разрабатываете пользовательские интерфейсы, то представьте себя еще и в пиратской шляпе.) Дизайнер из вашей команды попросил вас преобразовать простой макет в разметку и CSS. Вы бросаете быстрый взгляд на макет, который он вам прислал (рис. 2.4).

^{Рис. 2.4. Эскиз для нашего упражнения. По-хорошему, повторить его – минутное дело}

Содержимое достаточно скромное, но даже небольшие проекты требуют пристального внимания к мелочам. Итак, вы углубляетесь в изучение дизайна. Оценив типы контента в макете, вы пишете следующий HTML-код:

Заголовок с включенной в него ссылкой – прекрасная основа для семантической разметки, не правда ли? После обнуления стилей вы получаете в браузере следующий результат (рис. 2.5). По чуть-чуть продвигаемся вперед. Теперь мы можем начать добавлять свой стиль оформления. Давайте впишем в элемент

некоторые базовые правила:

^{Рис. 2.5. Разметка без стилей. Именно так создается мечта (и веб-сайт)}

Ничего особенного: светло-серый фон (

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

Вы, вероятно, заметили, что кегль (размер шрифта) был установлен

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

^{Рис. 2.6. Применив одно простое правило CSS, мы можем придать эскизу несколько другой вид}

Удивлены, почему

не выглядит как нормальный заголовок? Мы используем обнуление стилей, нивелирующее стили браузера по умолчанию для элементов HTML, чтобы обеспечить их соответствие в различных браузерах. Лично мне больше всего нравится способ обнуления от Эрика Мейера (http://bkaprt.com/rwd/9/), но вы можете выбрать какой-нибудь другой, благо выбор сейчас достаточно большой.

В любом случае наш

выглядит таким маленьким именно по этой причине: он наследует стиль , который мы задали родительскому элементу , а установленный в браузере по умолчанию кегль – 16 пикселей.

Теперь, если пиксели нас устраивают, мы можем перевести значения из оригинал-макета непосредственно в CSS:

Нет ничего плохого или неправильного в определении размера текста с помощью пикселей. Но в целях нашего эксперимента давайте начнем думать пропорционально и переведем значения кегля (

) из пикселей в относительные единицы, а вместо пикселей и будем использовать знакомые нам .

Контекстное восстановление

Сейчас будет немного математики: берем целевое значение кегля и делим на кегль (

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

Другими словами, относительный кегль можно рассчитать по следующей формуле:

(Отвлечемся на минутку. Лично у меня слово «математика» вызывает немедленный и серьезный приступ паники. У вас тоже? Стойте, не убегайте с криками – все не так страшно. Это говорит вам человек, который заменил курс математики в колледже курсом философии. Делайте, как я: просто посчитайте все на калькуляторе и скопируйте результат в CSS. Калькуляторы – просто спасение для таких, как мы, правда?)

Итак, формула у нас есть, давайте вернемся к нашему заголовку в

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

(24 пикселя,

) и кегля его контекста (16 пикселей, ):

Так как 24 пикселя в 1,5 раза больше 16 пикселей, это значит, что кегль равен

.

Вуаля! Размер нашего заголовка прекрасно совпадает с размером, указанным в оригинал-макете, но при этом выражен в относительных, масштабируемых единицах (рис. 2.7).

(Обычно я оставляю комментарий с расчетами с правой стороны (

). Вносить изменения становится намного проще.)