Как создать адаптивный сайт: гайд по медиа-запросам и flexbox

Привет, друзья! Меня зовут Кирилл Алехин, я предприниматель, атишник и основатель веб-студии XSL в ОАЭ. За годы работы мы создали десятки адаптивных сайтов для клиентов из разных стран, и сегодня я поделюсь с вами проверенными техниками, которые используем в нашей студии.

Адаптивный дизайн — это не роскошь, а необходимость. По данным Google, более 60% пользователей покидают сайт, если он неудобно отображается на их устройстве. В этой статье я расскажу, как сделать ваш сайт удобным для любого экрана с помощью медиа-запросов и flexbox.

Почему адаптивность важна?

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

Основные преимущества:

• Улучшение пользовательского опыта (UX)
• Повышение конверсии и продаж
• Лучшие позиции в поисковой выдаче (Google любит мобильные сайты)
• Экономия времени и ресурсов (один сайт вместо отдельных версий для ПК и мобильных)

Инструменты для адаптивности: медиа-запросы и flexbox

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

1. Медиа-запросы (Media Queries) — позволяют применять разные стили в зависимости от размера экрана.
2. Flexbox — мощный модуль CSS для гибкого позиционирования элементов.

Шаг 1: Настройка медиа-запросов

Медиа-запросы — это основа адаптивного дизайна. Они позволяют задавать разные стили для разных устройств. Вот базовый пример:

@media (max-width: 768px) {
    /* Стили для планшетов и мобильных устройств */
    body {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* Стили для смартфонов */
    .header {
        flex-direction: column;
    }
}

В нашей студии мы обычно используем следующие брейкпоинты:

Как правильно задавать брейкпоинты?

Не стоит ориентироваться только на стандартные размеры экранов. Лучше тестировать сайт на разных устройствах и добавлять брейкпоинты там, где это необходимо. Например, если на экране 800px ваш макет ломается, добавьте медиа-запрос именно для этого размера.

Шаг 2: Использование flexbox для гибких макетов

Flexbox — это настоящая палочка-выручалочка для адаптивных макетов. Он позволяет легко управлять расположением элементов, их выравниванием и распределением пространства.

Основные свойства flexbox

Вот ключевые свойства, которые мы используем в XSL:

• display: flex; — включает flex-контейнер.
• flex-direction — задает направление элементов (row, column, row-reverse, column-reverse).
• justify-content — выравнивает элементы по главной оси (flex-start, center, flex-end, space-between, space-around).
• align-items — выравнивает элементы по поперечной оси (stretch, flex-start, center, flex-end).
• flex-wrap — управляет переносом элементов на новую строку (nowrap, wrap, wrap-reverse).
• flex-grow — определяет, как элемент будет растягиваться, чтобы занять свободное пространство.
• flex-shrink — определяет, как элемент будет сжиматься, если не хватает места.

Пример flexbox-макета

Допустим, у нас есть шапка сайта с логотипом, меню и кнопкой. Вот как мы делаем ее адаптивной:

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }
}

На больших экранах элементы располагаются в строку, а на мобильных — в столбик.

Шаг 3: Практические советы по адаптивности

Вот несколько советов, которые мы применяем в нашей студии:

1. Мобильная версия — приоритет

Сначала разрабатывайте макет для мобильных устройств, а затем адаптируйте его для больших экранов. Это называется mobile-first подход. Он помогает сосредоточиться на самом важном контенте и избежать лишних элементов.

2. Используйте относительные единицы

Вместо пикселей (px) используйте относительные единицы, такие как em, rem и %. Например:

font-size: 1rem; /* 16px по умолчанию */
width: 50%; /* Занимает половину ширины родителя */

3. Оптимизируйте изображения

Большие изображения замедляют загрузку сайта на мобильных устройствах. Используйте srcset для загрузки разных версий изображений в зависимости от экрана:

<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     alt="Описание изображения">

4. Тестируйте на реальных устройствах

Не полагайтесь только на инструменты разработчика в браузере. Проверяйте сайт на реальных устройствах: iPhone, Android, планшетах и разных мониторах. В XSL мы используем специальные стенды с десятками устройств для тестирования.

5. Не забывайте про viewport

Добавьте мета-тег viewport в head вашего HTML-документа:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это гарантирует, что сайт будет корректно отображаться на мобильных устройствах.

Шаг 4: Пример адаптивного макета

Давайте создадим простой адаптивный макет с шапкой, основным контентом и футером.

HTML-структура

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивный сайт</title>
</head>
<body>
    <header>
        <div>Лого</div>
        <nav>
            <a href="#">Главная</a>
            <a href="#">Услуги</a>
            <a href="#">Контакты</a>
        </nav>
        <button>Заказать</button>
    </header>

    <main>
        <section>
            <h1>Добро пожаловать!</h1>
            <p>Мы создаем адаптивные сайты для бизнеса</p>
        </section>

        <section>
            <div>Функция 1</div>
            <div>Функция 2</div>
            <div>Функция 3</div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 XSL. Все права защищены.</p>
    </footer>
</body>
</html>

CSS с медиа-запросами и flexbox

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
}

.menu {
    display: flex;
    gap: 20px;
}

.features {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.feature {
    flex: 1;
    padding: 20px;
    background: #e9ecef;
    text-align: center;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .menu {
        flex-direction: column;
        gap: 10px;
    }

    .features {
        flex-direction: column;
    }
}

Заключение

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

Начните с малого: возьмите свой текущий сайт и добавьте медиа-запросы для мобильных устройств. Постепенно усложняйте макеты, используя flexbox. И не забывайте тестировать на реальных устройствах!

Если у вас есть вопросы или нужна помощь с адаптивным дизайном — пишите в комментариях или обращайтесь в нашу студию. Мы всегда рады помочь!

Удачи в разработке!
Кирилл Алехин, основатель XSL