Гибкая разметка при верстке
Оглавление
Здравствуйте уважаемые посетители моего блога. Мы уже с вами начали ознакомление с понятием адаптивной верстки и затронули частичку теоретической стороны этого вопроса в первой статье об истории адаптивной верстки.
Пришло время перейти от теории и истории к реальной практике, тем более это всегда интереснее, чем просто читать или слушать. Чтобы нам было с чем работать я предлагаю сверстать пару строк кода и с ними уже практиковаться. Вы же можете просто взять код у меня готовый и просто следить за тем, что изменяем и как это происходит. Чтобы скачать себе готовый код html5 и css3 кликните на изображение:
А теперь немного поговорим о фрагментах кода, которые есть в скачанном примере, чтобы вы понимали с чем мы работаем и что за что там отвечает. Итак первым непонятным вам куском кода будет строка находящаяся в служебной части html документа:
1 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Мета тег X-UA-Compatible управляет режимом отображением страниц в браузерах IE8+. Тег должен находиться в секции head страницы перед всеми остальными элементами, за исключением title и других мета-элементов. В противном случае он игнорируется!
Далее идет мета тег вьюпорта:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Этот тег отвечает за отображение страницы на мобильных устройствах, в атрибуте написано, что ширина страницы должна быть равна ширине девайса на котором открывается страница, а не ширине 960px, второе значение говорит о масштабирование равному 1, то есть без масштабирования.
Еще вас скорее всего интересует вот эта часть кода:
1 2 3 4 5 6 7 |
<!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> |
Это часть кода специально для 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, а именно к этому участку кода:
1 2 3 |
body { font: 100%/1.5em Arial, Helvetica, sans-serif; } |
Так как 960px признано стандартом ширины фиксированной страницы, так стандартом признано 16px величина шрифта по умолчанию на сайте. И наша формула записи шрифта в стилях говорит, что 100% — это размер шрифта, который равен 16px, а 1.5em — расстояние между строками (line-height) текста в окне браузера. Такую запись вы найдете в 95% всех адаптивных сайтов.
Ну и для закрепления понятия и проверки формулы на практике давайте ее применим на наших заголовках. У нас есть заголовок второго уровня h2, в стилях задайте ему размер в 30px. Применив формулу мы высчитаем его размер в относительной величине: 30px/16px=1,875em. После сохранения никакого изменения вы не увидите ибо 30px это и есть 1,875em, все просто и доступно и не нужно заканчивать академии.
На этом вторая часть по разбору адаптивной верстки окончена, я не прощаюсь с вами на долго, скоро увидимся и пишите мне в комментариях вопросы, пожелания или просто благодарности.
Для первого раза вроде и понятно, но не очень. Конечно нужно выбрать время, скачать код и пробовать. Тогда и будет понятно, что ясно , а что не совсем. Если я правильно понял проверку можно делать на своем блоге? Но наверное все же на тестовом. И если все удачно то двигаться дальше.
Для проверки кода вовсе не нужен блог или сайт, вы скачиваете код, html это один файлик, а css другой, подключаете css к html и пробуете ))
Давно грежу адаптивной версткой сайта, но продвигаемый мной сайт на Джумле, да еще и версия 2.5 уже устарела. Все плагины только на новую. А перенос на другую платформу или версию — это жесть.
Спасибо за статью. Такие выжимки по нужной мне теме нечасто в сети увидишь.