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

Привет, меня зовут Кирилл Алехин. Я предприниматель, атишник и основатель веб-студии XSL в ОАЭ. Сегодня хочу поделиться с вами проверенными методами создания адаптивных сайтов, которые отлично работают на любых устройствах — от настольных компьютеров до смартфонов. В этой статье мы разберём, как использовать медиа-запросы и flexbox, чтобы ваш сайт выглядел идеально на всех экранах.

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

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

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

Основы медиа-запросов

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

Синтаксис медиа-запросов

Базовый синтаксис медиа-запроса выглядит так:

@media (max-width: 768px) {
  /* Стили для экранов шириной до 768px */
}

Вот несколько распространённых точек перехода (breakpoints), которые мы используем в XSL:

Пример использования медиа-запросов

Допустим, у вас есть блок с карточками товаров. На десктопе они должны отображаться в три колонки, на планшете — в две, а на мобильном — в одну. Вот как это можно реализовать:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(33.333% - 20px); /* Три колонки на десктопе */
}

@media (max-width: 992px) {
  .card {
    flex: 1 1 calc(50% - 20px); /* Две колонки на планшете */
  }
}

@media (max-width: 576px) {
  .card {
    flex: 1 1 100%; /* Одна колонка на мобильном */
  }
}

Flexbox: мощный инструмент для адаптивной вёрстки

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

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

Вот ключевые свойства, которые нужно знать:

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

Практический пример: адаптивный хедер

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

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

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

@media (max-width: 768px) {
  .nav {
    display: none; /* Скрываем навигацию на мобильных */
  }

  .burger-menu {
    display: block; /* Показываем бургер-меню */
  }
}

Советы по созданию адаптивного сайта

Вот несколько советов, которые мы используем в XSL для создания по-настоящему адаптивных сайтов:

• Используйте относительные единицы (%, vh, vw, rem) вместо пикселей. Это поможет элементам масштабироваться пропорционально.
• Тестируйте на реальных устройствах. Эмуляторы — это хорошо, но ничто не заменит проверку на настоящих смартфонах и планшетах.
• Оптимизируйте изображения. Используйте форматы WebP или AVIF и сжимайте картинки без потери качества.
• Избегайте фиксированных высот. Элементы с фиксированной высотой могут ломать макет на маленьких экранах.
• Используйте viewport meta-тег. Он гарантирует, что сайт будет корректно отображаться на мобильных устройствах:

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

Заключение

Создание адаптивного сайта — это не магия, а набор проверенных техник и инструментов. Медиа-запросы и flexbox — ваши лучшие друзья в этом процессе. Начните с мобильной версии, постепенно масштабируйте её на большие экраны и не забывайте тестировать на разных устройствах.

Если у вас нет времени или ресурсов на самостоятельную разработку, обращайтесь в XSL. Мы создадим для вас современный, адаптивный и быстрый сайт, который будет работать на всех устройствах и привлекать клиентов.

Удачи в разработке! Если у вас есть вопросы — пишите в комментариях, с удовольствием отвечу.

Кирилл Алехин, основатель веб-студии XSL в ОАЭ