Адаптивная верстка сайтов | Макет на основе сетки
Продолжаем тему адаптивной верстки. Сегодня речь пойдет об одном из трех китов адаптивной верстки — макете на основе сетки (flexible gridbased layout). Два других – это медиа-запросы и гибкие изображения (flexible images).
В середине XX века графические дизайнеры популяризировали понятие типографской, или модульной, сетки — рациональной системы колонок и рядов, в которые можно было поместить модули с контентом. Смотрелось это свежо и весьма гармонично.
Однако графический дизайн и веб-дизайн — это, как говорят в Одессе, две большие разницы. Ключевой момент здесь — размер страницы. В типографском варианте он фиксированный, а веб-страница может растягиваться и сжиматься в зависимости от того, на чем ее просматривают.
Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:
target / context = result
Понять эту формулу проще всего на наглядном примере. Допустим, у нас есть нарисованный макет сайта в две колонки — контентная часть и сайдбар:
Мы сверстаем его «резиновым». Но вот проблема: как задать ширину обоих блоков? Ведь если прописать ее в пикселях, то они уже не будут резиновыми. Значит, нужно использовать проценты, а не пиксели. Но позвольте, а какие значения писать-то? Все равно ведь нужно от чего-то отталкиваться.
Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар — 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.
Вот для этого и служит та самая формула пропорциональности. Мы просто берем ширину внутренних блоков и делим ее на общую ширину страницы. Здесь вся страница — это context, а каждый из внутренних блоков, соответственно, target из приведенной выше формулы.
Считаем:
660 / 960 = 0,6875
300 / 960 = 0,3125
Остается только перевести эти данные в проценты. Не сильно заморачиваясь, просто сдвинем запятую на два знака вправо. Получаем:
68,75%
31,25%
Вот так вот просто. Однако давайте усложним задачу. Предположим, у нас контентная часть разделена еще на две неравные части. Например, слева узкая колонка с датой статьи и социальными кнопками, расположенными вертикально, а правая колонка широкая, и в ней у нас размещен текст статьи.
Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:
120 / 660 = 0,1818
520 / 660 = 0,7878
В процентах получаем соответственно 18,18% и 78,78%
Кстати, в современных файлах стилей, использующих адаптивную верстку, правильные верстальщики добавляют в качестве комментариев подобные расчеты. Для лучшей наглядности. Вот как это обычно выглядит:
.content {
width: 68,75%; /* 660px / 960px */
}
Надеюсь, с этим не возникло сложностей. Поехали дальше!
Макет на основе сетки
Рассмотренные выше примеры это, конечно же, еще не сетка. Ну, какая сетка из двух колонок? Настоящая модульная сетка призвана помогать и дизайнерам и верстальщикам создавать сложные сайты со множеством колонок и отдельных блоков.
Поэтому и появилась масса удобных сервисов и инструментов, реализующих этот метод легко и просто. Например, 960.gs. Здесь вы можете не только наглядно изучить принцип разметки на основе модульной сетки, но и скачать шаблоны и использовать их.
На самом деле таких сервисов сейчас пруд пруди! Еще они называются фреймворки. Выбирай, какой больше понравится. Вот отличная подборка 30 CSS-фреймворков для адаптивного веб-дизайна.
Для чего вообще нужны эти модульные сетки?
В первую очередь модульные сетки нужны для того, чтобы визуально упорядочить контент на странице сайта. Это не только с эстетической точки зрения красиво и радует глаз пользователя, но и удобно самим разработчикам. Особенно если сайт действительно сложный по структуре и содержанию.
Кроме того, такие модульные сетки гораздо проще сделать адаптивными, чем беспорядочно разбросанные блоки разного размера.
Ну и, разумеется, скорость разработки таких сайтов гораздо выше. Вам не нужно морочиться и изобретать велосипед с нуля. Достаточно выбрать подходящий фреймворк и по нему сверстать сайт.
Надеюсь, теперь вы знаете, что такое адаптивная верстка на основе модульной сетки.
В следующий раз поговорим про гибкие изображения в адаптивной верстке. Очень важная и не однозначная тема. Рекомендую ее тоже изучить хорошенько, чтобы не попасть впросак. Оставайтесь на связи! А еще лучше подпишитесь на рассылку новостей блога Вебсовет.
А что означает вот такая строчка в css?
font-size: 2em; /* 24px / 12px */
Mikola, в адаптивной верстке и шрифт тоже должен быть адаптивным, а не в пикселях. Потому мы его и указываем в относительных единицах em. А в данном комментарии точно так же, как и для блоков, указана пропорциональная зависимость. Ее можно расшифровать так: если за основной размер шрифта страницы взять 12 пикселей, то размер в 24 пикселя составит 24 / 12 = 2em. Здесь под основным размером шрифта подразумевается то значение, которое браузер показывает по-умолчанию, если ему вообще не задавать никаких размеров. Хотя на самом деле там не 12, а 16 пикселей обычно. Об адаптивных шрифтах я расскажу подробнее в отдельной статье.