Адаптивный веб-дизайн (англ. Responsive web design) — новый подход в дизайне веб-страниц, обеспечивающий улучшенное восприятие веб-страницы на устройствах с разным разрешением экрана. Целью адаптивного веб-дизайна является представление универсального веб-сайта для различных устройств.
Для того, чтобы веб-сайтом был удобно пользоваться при различных разрешениях и форматах, адаптивный веб-дизайна не предполагает создание отдельных версии веб-сайта для определенных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре разрешений от самых малых (320х240 пикс.) до максимальных — FullHD и больше.
При создании файла стилей для сайта есть 2 основных подхода:
Mobile-first — это подход в проектировании правил стилей, который предполагает, что стили, заданные по умолчанию, задаются для всех экранов от 0 пикселей и выше, а далее уже через media queries вы кастомизируете или дополняете уже существующие стили. При использовании этого подхода, как и гласит его название, вы должны в первую очередь ориентироваться и думать о маленьких экранах.
Приведу пример:
h1 {font-size: 18px; line-height: 1.2;}
@media screen and (min-width: 480px) {
h1 {font-size: 24px; line-height: 1.3; margin-bottom: 18px;}
}
@media screen and (min-width: 1024px) {
h1 {font-size: 36px; line-height: 1.4; margin-bottom: 24px;}
}
Как видно из данного примера, по умолчанию размер заголовка является небольшим, а далее уже с помощью media queries его стили изменяются и дополняются.
Причем, media-queries таргетируются по правилам только min-width: xx — это сделано для того, чтоб вы стремились по возможности только добавлять новые свойства стилей, но не переопределять уже существующие.
Преимуществом данного подхода является простота структуры кода и его компактность, если сравнивать с подходом, где в первую очередь верстаются стили для больших дисплеев. Но этот подход требует более тщательного планирования и структурирования файла стилей, а также работы над всеми вариантами ширины сайта одновременно (т.е., верстка ведется сразу для всех устройств).
Второй из подходов, destop-first, проще, так как зачастую верстальшик работает на большом мониторе, и ему проще сначала сделать верстку для больших экранов, а далее уже ее кастрир.. ээ- кастомизировать для планшетов и телефонов. Обратной стороной медали является более запутанный код (больше переопределений в стилях) и больший размер самого кода CSS.
Первый из подходов, благодаря его преимуществам, обрел большую популярность, и его широко используют ставшие уже стандартными фреймворками для разработчиков Bootstrap и Zurb Foundation.
Эти фреймворки довольно схожи, используют подключенный файл иконочных шрифтов, 12-ти колоночную структуру (можно кастомизировать структуру, к примеру 16 колонок в Бутстрапе). Есть возможность предварительной кастомизации фреймворка под себя и последующей загрузки уже готового индивидуально вашего каркаса.
К примеру, построение стандартной сеточной html-структуры в bootstrap сводится к следующему:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
This is full-width block
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 1
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 2
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 3
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 4
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 5
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
Block 6
</div>
</div>
</div>
Как видно, использована 12-ти колоночная структура с 4-мя классами, отвечающими за 4 различных диапазона ширины экранов. Ширина каждой колонки указывается в процентах, что и создает возможность «растягивать» верстку.
Тут ячейки на больших экранах займут 1/3 ширины блока с классом «row» (col-lg-4 определяет поведение для больших экранов, а 4 означает ширину блока в 4 колонки, что из 12 и будет одной третью), а на самых маленьких (к примеру, на «айфонах») — будут во всю ширину, сдвинув соседей вниз.
Ниже подобный пример, сделанный с помощью Bootstrap, в действии:
Также, для продвинутых front-end-девелоперов — в обоих фреймворках есть возможность загрузить SASS(SCSS)-вариант файлов и получить готовый фреймворк в удобой среде редактирования SASS.
А вот узнать, видит ли Google ваш сайт готовым к использованию на мобильных устройствах, вам поможет инструмент проверки Mobile-Friendly Test от самого Google.
Также, множество интересных вещей вы можете унать на специальном ресурсе, посвященном разработчикам сайтов — Web Fundamentals
Если у вас еще остались какие-либо вопросы по тому, что такое адаптивная верстка, либо вы знаете, чем еще будет полезно дополнить данную заметку, прошу пишите в комментариях и я постараюсь сразу дать свой ответ.
