Адаптивная верстка сайта: пошаговая инструкция с примерами

Автор антон павлов April 19, 2018

Верстка - это создание структуры и оформление элементов web-страницы. Написанием кода веб-страницы занимается верстальщик или front-end разработчик. Он использует графическую программу для нарезки макетов, редактор кода, дополнительные программы для ускорения процесса.

Что такое верстка

Код верстки является скелетом страницы сайта, пишется на языке разметки html. Состоит из логически разбитых на элементы частей страницы - тегов. Каждый из них отвечает за свою область: меню, подвал сайта, медиа, формы, карты, поиск по сайту, время. У них есть атрибуты, с их помощью идентифицируются отдельно взятые элементы. За оформление отвечают каскадные таблицы стилей, а за динамические эффекты - джаваскрипт.

Качественно сделанная верстка одинаково отображается на всех браузерах. Результат определяется проведением ряда тестов. Способность работать на более, чем одной аппаратной платформе, называется кроссплатформенность. Существует несколько подходов реализации верстки, используются различные фреймворки.

Для создания страниц по современным стандартам применяются разные методы адаптивной верстки. Это обеспечивает корректное отображение элементов на всех типах экранов.

Виды макетов

Стандарты постоянно совершенствуются, и, как следствие, меняются способы разработки макетов. На данный момент существует 3 основных вида страниц:

статическая;
резиновая;
адаптивная.

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

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

При создании резиновой верстки также учитываются изменения размеров экрана и все элементы подстраиваются. Главным отличием от адаптивной является то, что верстка расширяется или сужается под экран на каждом моменте изменений.

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

Размеры для адаптивной верстки

Для создания адаптивных макетов используются относительные единицы измерений вместо стандартного статического px. Самые распространенные:

em;
rem;
%.

В адаптивной верстке на html em используется для того, чтобы задавать размеры шрифтов и отступов. По умолчанию 1 em равняется 16 пикселям. Соответственно, чтобы задать шрифт для параграфа p размером 32 пикселя, необходимо указать следующие:

p {

font-size: 2em;

}

Особенностью использования единицы является то, что 1em равняется размеру шрифта своего элемента. То есть 1em принимает различные значения в разных участках кода. Например, в блоке, где размер шрифта равняется 2em (32px), margin в 1em будет равняться 32 пикселям. Но там, где шрифт равняется 1em (16px), padding в 1em будет равняться стандартным 16 пикселям.

Rem - корневой em, который определяется в теге <html>. 1 root-em, в отличие от 1em, равняется одному числу при любых обстоятельствах. Значение меняется только тогда, когда изменения задаются принудительно.

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

Медиазапросы

В CSS включена поддержка различных технических параметров устройств. Определяется смартфон с маленьким расширением экрана, указывается стилевое свойство под его значение. Медиазапросы выявляют различия ориентации: портретная и альбомная. Широко применяются для создания адаптивной верстки. Макет подстраиваться под указанное разрешение экрана, меняется структура документа в соответствии с кодом.

Определяемые типы устройств:

устройства braille и принтеры embossed для слепых;
обычные принтеры print;
экран монитора screen;
речевые синтезаторы speech;
телевизоры tv.

В значении имени запросов указываются несколько условий. Например, выводить содержимое только для экранов мониторов и только максимальной шириной 600 px. Это выглядит так:

@media screen and (max-width: 600px) { код вывода }.

Адаптивный дизайн строится на использовании медиазапросов. Создается верстка для экранов, у которых минимальная ширина 1200 пикселей, тело кода помещается в @media screen and (max-width: 1200px) { }. Далее создается блок для планшетов @media screen and (min-width: 700px) { } и мобильных устройств @media screen and (max-width: 699px) { }.

Mobile First

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

Подход Mobile First предполагает отображение самого важного содержимого, легкий и оптимизированный веб-сайт, отказ от загрузки других ресурсов.

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

Bootstrap

Один из популярных фреймворков, который дал простой ответ на вопрос, как сделать адаптивную верстку, - это Twitter Bootstrap. С помощью 12-колоночной сетки бутстрап создаются сайты, которые сразу по умолчанию правильно отображаются на экранах мобильных устройств. В качестве основных инструментов используются:

заранее заданная ширина колонок, которыми можно определить ширину элементов;
фиксированные и резиновые компоненты документа;
встроенные шрифты и классы для них;
средства оформления таблиц;
классы оформления в меню, панели инструментов.

Динамические эффекты написаны на jQuery, для описания внешнего вида используется препроцессор SASS, в функционал встроены популярные веб-шрифты. Сайты, разработанные на последней версии bootstrap, не отображаются корректно в редко используемых версиях браузеров, таких как IE8, IE9 и iOS 6. Примечательно, что в качестве размеров шрифтов некоторых элементов используются корневые em. На официальном сайте есть подробные мануалы на английском и русском языке, примеры адаптивной верстки, способы использования встроенных компонентов.

Foundation

Foundation - мощный фреймворк, один из главных конкурентов Twitter Bootstrap. Поддерживает любые размеры сеток, имеет ряд преимуществ, которых не хватает в Bootstrap.

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

Размеры задаются значениями, приведенными в таблице.

small	0
smedium	420px
medium	640px
large	1024px
xlarge	1200px
xxlarge	1440px

Grid Layout

Еще одна система, которая заслуживает внимания, - это Grid Layout. Представляет собой набор пересекающихся вертикальных и горизонтальных линий. Они образовывают столбцы и строки. Элементы помещаются в сетку, их размеры указываются в соответствии со строками и таблицами. Имеется возможность использовать фиксированные размеры, такие как px, и гибкие - проценты, rem и em.

Сначала grid контейнер нужно объявить.

display: grid

Для задания ширины строк используется свойство grid-template-columns, а столбцов - grid-template-rows. Размеры могут быть указаны в одном свойстве grid-template-columns. Ширина полос измеряется в единицах fr, которые представляют собой долю доступного пространства в контейнере. Предусматривается возможность использования fx и px в одном свойстве. Например, grid-template-columns: 500px 1fr 2fr.

Заключение

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

Добавить комментарий