В обозримом будущем любая композиция дизайна, с которой вы столкнетесь или которую станете создавать, скорее всего, будет иметь фиксированные размеры. В настоящее время мы измеряем размеры, поля и т. д. в пикселах в графических файлах, открытых в 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>, какой процент от ширины области просмотра должна составлять его ширина?
Добавить комментарий