Преобразование дизайна на основе фиксированного макета в дизайн на основе пропорционального макета

В обозримом будущем любая композиция дизайна, с которой вы столкнетесь или которую станете создавать, скорее всего, будет иметь фиксированные размеры. В настоящее время мы измеряем размеры, поля и т. д. в пикселах в графических файлах, открытых в Photoshop, Fireworks и пр. Затем мы переносим эти размеры непосредственно в CSS. То же самое касается размеров текста. Мы щелкаем на текстовом элементе в нашем любимом редакторе изображений, смотрим на размер шрифта, после чего вводим его (опять-таки зачастую измеряя в пикселах) в соответствующее CSS-правило. Как же нам преобразовать фиксированные размеры в пропорциональные?

Формула для запоминания

Возможно, я становлюсь слишком большим фанатом Итана Маркотта, однако на данном этапе для меня важно сделать еще один большой реверанс в его адрес (вероятно, это должен быть поклон, возможно, даже с преклонением колена). Мистер Маркотт внес вклад в замечательную книгу Дэна Седерхольма Handcrafted CSS («CSS ручной работы»), написав главу о «резиновых» сетках. В ней он привел простую и непротиворечивую формулу, позволяющую преобразовать пиксельные показатели фиксированной ширины в пропорциональные процентные значения:

Ширина цели х ширина контекста = результат.

Немного напоминает уравнение? Не беспокойтесь, при создании адаптивных веб-дизайнов эта формула быстро станет вашим новым лучшим другом. Вместо того чтобы дальше говорить о теории, применим эту формулу на практике для преобразования текущего макета с фиксированными размерами, используемого на сайте And the winner isn’t., в «резиновый» макет с размерами на основе процентных значений.

Если помните, в главе 2 мы установили, что базовая разметочная структура нашего сайта выглядит так:

<div id="wrapper">

<!— верхний колонтитул и навигация —>

<div id="header">

<div id="navigation">

<ul>

<li><a href="#">navigation1</a></li>

<li><a href="#">navigation2</a></li>

</ul>

</div>

</div>

<!— врезка —>

<div id="sidebar">

<р>Это врезка</р>

</div>

<!— содержимое —>

<div id="content">

<р>Это содержимое</р>

</div>

<!— нижний колонтитул —>

<div id="footer">

<р>Это нижний колонтитул</р>

</div>

</div>

Содержимое было добавлено позднее, однако здесь важно отметить CSS-код, который мы используем для задания ширины основных структурных элементов (header, navigation, sidebar, content и footer). Обратите внимание, что я не стал приводить многие из правил стилизации, чтобы мы смогли сосредоточиться на структуре:

#wrapper { margin-right: auto; margin-left: auto; width: 960px;

}

#header { margin-right: 10px; margin-left: 10px; width: 940px;

}

#navigation padding-bottom: 25px; margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px;

Width: 940px;

}

#navigation ul li { display: inline-block;

}

#content { margin-top: 58px; margin-right: 10px; float: right; width: 698px;

}

#sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; padding-right: 10px; margin-right: 10px; margin-left: 10px; float: left; width: 220px;

}

#footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both; width: 940px;

}

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

Все содержимое располагается в элементе <div> с идентификатором #wrapper. Из приводившегося чуть ранее CSS-кода видно, что для его свойств margin-right и margin-left задано значение auto, а для wi dth — значение 960px. Как нам определить для самого дальнего элемента <div>, какой процент от ширины области просмотра должна составлять его ширина?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *