Выбираем подход.
mobile-first - лучшая практика, но требует наличия либо адаптированных макетов, либо умение\чувство прекрасного\верного товарища-дизайнера рядом для самостоятельного составления адаптированных макетов у себя в голове. Разметка\стили пишутся сначала под мобильные устройства, с постепенным развитием до desktop.
desktop-first - когда у нас есть только desktop-макет или уже готовая верстка, и мы постепенно уменьшаем\упрощаем стили под мобильные устройства. Наш случай, его мы и выбираем.
Ключевые брейкпоинты.
Сразу определяем набор ключевых, граничных брейкпоинтов для разных устройств. Не будем сходу усложнять себе жизнь и потренируемся на следующих ширинах:
от минимальной - это мобильные стили;
от 768 - это стили для планшетов (таблеток, tablet);
от 1200 - для desktop.
Для mobile-first медиазапросы выглядят следующим образом:
.foo { color: black } // основные стили - для мобилок
@media (min-width: 768px) { .foo { color: tomato } } // для таблеток
@media (min-width: 1200px) { .foo { color: crimson } } // для десктоп
Грубо говоря, мы говорим браузеру “Начиная с 768 включительно у нас будут применяться следующие стили”.
Для desktop-first медиазапросы пишут немного по другому:
.foo { color: crimson } // основные стили - для десктоп
@media (max-width: 1199px) { .foo { color: tomato } } // для таблеток
@media (max-width: 767px) { .foo { color: black } } // для мобилок
Грубо говоря, мы говорим браузеру “До 1199 включительно у нас будут применяться следующие стили”.
Обратите внимание на значение 1199 и слово “включительно”, это важно.
Контейнер-центровщик. Резина или фиксированный адаптив.
Класс container центрует контент внутри секции. Он играет важную роль при построении адаптивных стилей. Важно сразу определится, какое поведение контента нам нужно - он должен заполнять всю ширину экрана, иметь фиксированные размеры для определенных экранов, или комбинировать оба подхода.
Резина - это когда и размеры центровщика, и контента внутри отпущены в вольное плавание и занимают все доступное внутри родительского блока-секции (кроме случаев, когда мы явно указываем ограничения через max-width, например.). Довольно сложный для поддержки подход, особенно там, где у нас много типографики и текста.
Фикисированный адаптив - собственно, исходя из названия, мы задаем центровщику фиксированные размеры (width или max-width) для каждого брейкпоинта. Благодаря этому получаем весьма прогнозируемое поведение контента в границах брейкпоинтов, что упрощает разработку.
Оба варианта можно комбинировать, но остановимся на фиксированном адаптиве. Исходя из выбранных нами ключевых брейкпоинтов, распишем правила для контейнера-центровщика:
// основные правила - десктоп
.container {
max-width: 1040px; // max-width вместо width - чтобы не получить горизонтальный скроллбар если что-то пойдет не так
margin: 0 auto;
padding: 0 10px; // чтобы контент не прилипал к экрану; учитывая дополнительные отступы, увеличиваем и максимальную ширину контейнера чтобы соответствовать макету
}
// правила для таблеток
@media (max-width: 1199px) {
.container {
max-width: 720px;
}
}
// правила для мобилок
@media (max-width: 767px) {
.container {
max-width: 320px; // обычно, за минимальную ширину экрана для мобилок берут 320px; т.к. на мобильных устройствах современные браузеры не "отбирают" место под скроллбар, то можно задать размеры "впритык". В инспекторе тоже можно выбрать тип отображения (десктоп\мобайл\тач\не тач), вместе с этим и эмулируется поведение скроллбара/его позиционирование.
}
}
Глаза боятся, а руки делают.
Открываем инспектор, заходим в режим адаптивной верстки, пишем правила и проверяем как выглядит.
