Адаптивная вёрстка

Посетители заходят на сайты не только с ноутбуков и настольных компьютеров, но и смартфонов и планшетов. Разница между ними в размерах экранов. На смартфоне типичная ширина 360px, на планшете 1024px, а десктопы и ноутбуки 1300px и выше. Понятно, что такая большая разница требует различной компоновки элементов страницы.

Адаптивная вёрстка как раз и призвана решать такие задачи. Мы будем использовать Berry CSS, которая содержит все необходимые классы.

Рассмотрим схему какого-то простого блока из 3-х ячеек.

Название сайта | инфо-блок | соц.иконки

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

У flex есть свойство wrap, которое разрешает перенос ячеек, когда им не хватает места. Тогда ячейки переносятся на другую. Например на планшете получится так:

Название сайта | инфо-блок | 
соц.иконки

А на телефоне так:

Название сайта | 
инфо-блок | 
соц.иконки

Сделаем тестовую разметку на Simple и Berry CSS.

div(flex flex-wrap t-center)
    __(bg-red100) Название сайта
    __(bg-green100) Инфо-блок
    __(bg-yellow100) Соц.иконки
/div

Класс flex-wrap разрешает перенос flex-ячеек. Попробуйте сейчас в браузере перейти в режим адаптивного дизайна (Ctrl+Shift+M в FireFox или F12 в Chrome и выбрать иконку) и уменьшите размер страницы до 300px и ниже. Вы увидите как переносятся блоки.

Чтобы разместить блоки как положено, нужно указать их ширину.

div(flex flex-wrap t-center)
    __(bg-red100 w30) Название сайта
    __(bg-green100 w50) Инфо-блок
    __(bg-yellow100 w20) Соц.иконки
/div

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

div(flex flex-wrap t-center)
    __(bg-red100 w30 w50-tablet w100-phone) Название сайта
    __(bg-green100 w50 w50-tablet w100-phone) Инфо-блок
    __(bg-yellow100 w20 w100-tablet) Соц.иконки
/div

«Поиграйте» шириной браузера, чтобы посмотреть поведение сетки. Модификатор класса -tablet сработает для планшетов, а -phone — для телефонов.

По умолчанию в Berry CSS используются такие размеры:

• -tablet — 768px
• -phone — 667px
• -small — 360px

То есть для ячейки указываются класс обычной ширины (без модификатора), после класс для планшета, потом класс телефона и, если нужно для совсем мелких устройств (small).

Часто встречаются задачи, когда wrap-свойство нужно ограничить. Например ячейка может содержать много текста, то есть перенос может появиться даже на десктопной версии. Делается это с помощью модификаторов: -tablet и -phone. При этом wrap-класс указывается один.

div(flex flex-wrap-tablet)
    ...
/div

Такой подход является фактически типовым не только в Berry CSS или MaxSite CMS, а вообще для построения любого сайта. Разница может быть только в названиях классов, но общий принцип будет един.

Когда вы будете создавать компонент или модуль, то сразу проверяйте его поведение на малых экранах и добавляйте классы адаптивности. Если этого не сделать, то сайт будет плохо смотреться на смартфонах, а это ограничивает круг посетителей — мало кому будет интересно смотреть развалившийся сайт. Более того, адаптивность влияет на ранжирование поисковиками. Google прямо указывает на то, что поддержка мобильных устройств является чуть ли не обязательным для сайта.

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

• t250-tablet — размер текста для планшетов
• t200-phone — размер для телефонов
• t-center-tablet — выравнивание текста для планшетов
• t-right-phone - для телефонов
• t-nowrap-tablet - запретить перенос текста для планшетов
• t-wrap-phone - разрешить перенос текста для телефонов

Также можно изменить отступы margin и padding:

• pad0-phone — нулевой отступ для телефона
• mar10-tablet - 10px отступ для планшета
• pad20-r-tablet - 20px справа для планшета
• pad5-tb-phone - 5px сверху и снизу для телефона

По умолчанию используются (px): 0, 5, 10, 20. Как правило этого достаточно.

Flex-сетка обладает ещё несколькими возможностями, которые могут применяться для адаптивности. Есть свойство order, которое указывает порядок отображения ячеек. Скажем в нашем примере на телефонах мы хотим вывести блок соц.иконок рядом с названием сайта в одной строке, а инфо-блок перенести внизу:

Название сайта | соц.иконки
инфо-блок |

Хотя нетрудно заметить, что в html-коде используется другой порядок. Чтобы этого добиться добавим классы для order

div(flex flex-wrap t-center)
    __(bg-red100 w30 w50-tablet flex-order1) Название сайта
    __(bg-green100 w50 w50-tablet w100-phone flex-order3) Инфо-блок
    __(bg-yellow100 w20 w100-tablet w50-phone flex-order4 flex-order2-phone) Соц.иконки
/div

Число в классе order указывает на порядок вывода. Доступны варианты: 1, 2, 3, 4, 5.

Помимо этого для flex ещё предусмотрены классы адаптивности (примеры для телефонов):

• flex-reverse-phone — обратный порядок ячеек
• flex-vcenter-phone — выравнивание по вертикали (align-items: center)
• flex-hcenter-phone — выравнивание по горизонтали (justify-content: center)
• flex-phone — flex-контейнер для телефона

Все эти классы достаточно специфичны и вряд ли вам понадобятся на начальном этапе, но в будущем, когда вы будет делать сложную адаптивность, то вспомните, что в Berry CSS уже есть готовые решения.