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

Адаптивная верстка базируется на двух вещах:
1) Резиновый макет сайта;
2) Медиа запросы.

Резиновый макет подразумевает собой то, что при верстке сайта основные величины размеров, а также отступов, шрифтов и т.д., будут указаны в процентном соотношении, а не как при статичной верстке — строгими параметрами.

Медиа запросы помогают определить под какое разрешение подстраивается данный сайт. Для большинства устройств такие размеры уже определенны и хорошо известны. Например планшеты имеют ширину 768 пикселей, а телефоны 480 пикселей. Следовательно при указании медиа запроса для конкретной ширина устройства, сайт будет перестраивать контент в такой вид, который мы отдельно описываем для данной ширины. Данный урок будет полезен ученикам и они лучше смогут понимать концепцию создания подобных сайтов.

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

Полноформатный вид сайт

Планшетный вид сайта

Вид сайта на смартфоне

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

Приложенный материал к статье.