Что такое адаптивная верстка?

Всем привет! Думаю, что многие из вас слышали о такой вещи как "Адаптивная верстка" или "Responsive makeup"(отзывчивая верстка). Сегодня я немного введу вас в курс дела, а в следующих статьях мы будем углубляться в эту тему.

Итак, что подразумевает под собой слово "отзывчивая"? Отзывчивая верстка - это верстка, которая автоматически подстраивается(адаптируется) под то разрешение устройства, на котором в данный момент просматривает страницу пользователь. К примеру, если вы смотрите страницу на большом экране или даже телевизоре, то у вас будет одно отображение сайта, а если вы просматриваете ту же страницу на, к примеру, мобильном устройстве, то у вас будет уже совсем другой вид данной страницы.

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

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

Узнать все это лучше в видео формате и для этого есть курc HTML5 и CSS3 с Нуля до Гуру, но, если вы предпочитаете читать, а не смотреть, то подписывайтесь на обновления, чтобы не пропустить новый выпуск по данной, очень интересной теме.

Итак, начнем.

Для начала нам нужно узнать, что же входит в понятие "адаптивная верстка"? А в данное понятие входит следующее:

• Гибкие шрифты
• Гибкий макет на основе сетки
• Гибкие изображения
• Медиазапросы

Теперь поговорим поподробнее обо все этом.

Гибкие шрифты - это шрифты, которые заданы не жестко в px(пикселях), а в em, величине, которая может меняться.

Посмотрим на простой пример

Что мы здесь указали? Я не просто так написал для тега body размер 16px, ведь это именно тот размер шрифта, который принят по умолчанию в браузерах. Теперь нам нужно, опираясь на данное значение, указать размер шрифта в 24px для заголовка h1. Как это сделать? А очень просто! Для этого есть формула

цель / контекст = результат

Запомните эту формулу, она нам еще пригодится.

Нам нужно получить размер шрифта 24px, верно? - это будет наша цель.

У нас шрифт установлен по умолчанию - 16px - это контекст.

Считаем: 24 / 16 = 1.5

Т.е. размер для h1 будет 1.5em.

Итак, с этим разобрались.

Едем дальше и поговорим о гибкой сетке.

Как понятно из названия, гибкая сетка - сетка, которая может изменяться. Для чего это нужно? К примеру, на большом мониторе мы можем показать пользователю 3 колонки, но ведь на мобильном устройстве ему будет неудобно смотреть 3 колонки! Если человек зашел с телефона, то надо оставить одну колонку и всего этого добиться нам помогут гибкие сетки. О них мы будем подробно говорить в отдельной статье. Сейчас я могу сказать лишь то, что там вместо px мы будем использовать %.

Гибкие изображения - очень важная и на самом деле нетрудная тема.

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

И последнее - медиазапросы.

Медиазапросы - это условия, которые либо выполняются, либо не выполняются.

К примеру, мы можем задать ширину колонки 500px, но, если ширина области просмотра пользователя меньше 300px, то ширину колонки нужно установить в 100px.

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

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

Спасибо за внимание и не пропустите следующую статью!