Гибкая разметка при верстке

Здравствуйте уважаемые посетители моего блога. Мы уже с вами начали ознакомление с понятием адаптивной верстки и затронули частичку теоретической стороны этого вопроса в первой статье об истории адаптивной верстки.

Пришло время перейти от теории и истории к реальной практике, тем более это всегда интереснее, чем просто читать или слушать. Чтобы нам было с чем работать я предлагаю сверстать пару строк кода и с ними уже практиковаться. Вы же можете просто взять код у меня готовый и просто следить за тем, что изменяем и как это происходит. Чтобы скачать себе готовый код html5 и css3 кликните на изображение:

 

А теперь немного поговорим о фрагментах кода, которые есть в скачанном примере, чтобы вы понимали с чем мы работаем и что за что там отвечает. Итак первым непонятным вам куском кода будет строка находящаяся в служебной части html документа:

Мета тег X-UA-Compatible управляет режимом отображением страниц в браузерах IE8+. Тег должен находиться в секции head страницы перед всеми остальными элементами, за исключением title и других мета-элементов. В противном случае он игнорируется!

Далее идет мета тег вьюпорта:

Этот тег отвечает за отображение страницы на мобильных устройствах, в атрибуте написано, что ширина страницы должна быть равна ширине девайса на котором открывается страница, а не ширине 960px, второе значение говорит о масштабирование равному 1, то есть без масштабирования.

Еще вас скорее всего интересует вот эта часть кода:

Это часть кода специально для IE-8 чтобы он читал все теги с HTML5. Здесь подключаются две библиотеки, которые добавляют возможность в будущем использовать новые элементы и конечно медиа запросы, к которым мы еще придем в последующих занятиях.

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

В коде стоят фиксированные размеры ширины наших блоков основного контента и сайдбара, а также обтекание и выравнивание. А теперь самое интересное, переходим к последовательному переверстыванию нашей страницы под отзывчивый дизайн. Для этого нам нужно все фиксированные единицы измерения заменить на относительные, то есть px на % и на em.

Формулы перерасчета абсолютных величин в относительные

• Цель/контекст=результат
• 24px/16px=1.5em

Теперь вносим ясность в понятие изменений величин и размеров, значит все ширины будут указываться строго в %, а все размеры шрифтов в em. Бывают исключения, но в основном все так, как я написал.

Этапы замены размеров верстки

Наш основной блок, у которого ширина 960px заменяем на относительную ширину в 90%. Что это нам даст, а даст следующее, какой бы размер не был браузера, наш контент будет иметь одинаковые отступы с лева и права по 5%. Это мы задали размер глобальному блоку в котором все содержимое страницы, теперь время посмотреть на блоки с размерами 650px и 300px.

Обращаем внимание на формулу: цель/контекст=результат, цель — это блок с 650px, а контекст, ранее взятые 960px, которые сейчас уже 90% и в результате мы получаем такую запись: 650/960*100=67,70833333333333 — это и есть ширина в процентах нашего блока.

Аналогичным образом заменяем размеры и второму блоку с 300px на процентное соотношение используя все ту же формулу: 300/960*100=31.25%. Как видите ничего сложного, все довольно просто и понятно.

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

Что такое контекст в нашей формуле

Контекстом выступает всегда родитель, в первом случае, это глобальный размер 960px или как сейчас некоторые верстают 1140px, это и есть контекст. Но если мы допустим хотим наш блок, который имел 650px (67,70833333333333) поделить скажем еще на две части, тогда контекстом для етих частей уже будет размер 67,70833333333333% и так везде. Обратно же, это если вы будете переверстывать готовый шаблон под отзывчивый дизайн, а так можно просто написать 50%, и это будет половина от размера родителя.

Вторая формула перерасчета размеров шрифта

Перед обращением непосредственно к самой формуле давайте обратимся к записи в css, а именно к этому участку кода:

Так как 960px признано стандартом ширины фиксированной страницы, так стандартом признано 16px величина шрифта по умолчанию на сайте. И наша формула записи шрифта в стилях говорит, что 100% — это размер шрифта, который равен 16px, а 1.5em — расстояние между строками (line-height) текста в окне браузера. Такую запись вы найдете в 95% всех адаптивных сайтов.

Ну и для закрепления понятия и проверки формулы на практике давайте ее применим на наших заголовках. У нас есть заголовок второго уровня h2, в стилях задайте ему размер в 30px. Применив формулу мы высчитаем его размер в относительной величине: 30px/16px=1,875em. После сохранения никакого изменения вы не увидите ибо 30px это и есть 1,875em, все просто и доступно и не нужно заканчивать академии.

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