Адаптивная вёрстка: сайт на телефоне и компьютере

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

Больше половины людей открывают сайты с телефона. Страница, свёрстанная только под большой экран, на телефоне превращается в мелкий текст, который приходится раздвигать пальцами. Адаптивная вёрстка — это подход, при котором одна и та же страница подстраивается под любой экран.

Шаг 1: метатег viewport

Без этой строки в <head> мобильный браузер покажет страницу как на компьютере, только уменьшенной:

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

Она говорит: «ширина страницы равна ширине экрана устройства». Добавляйте её в каждую страницу.

Шаг 2: гибкие размеры

Фиксированная ширина в пикселях — главный враг адаптивности. Блок шириной 1000px на телефоне шириной 375px вылезет за экран. Поэтому используют гибкие единицы:

.container {
  max-width: 1080px;   /* на большом экране не шире 1080px */
  margin: 0 auto;
  padding: 0 16px;
}

h1 {
  font-size: 2rem;     /* 32px при стандартных настройках */
}

Размеры в rem уважают пользователя: если человек со слабым зрением увеличит шрифт в браузере, ваш текст увеличится вместе с ним.

Шаг 3: картинки не вылезают

img {
  max-width: 100%;
  height: auto;
}

Картинка показывается в своём размере, если места хватает, и пропорционально уменьшается, если контейнер уже. Это правило есть почти в каждом проекте.

Шаг 4: медиазапросы

Медиазапрос применяет стили только при определённой ширине экрана:

.cards {
  display: flex;
  flex-direction: column;   /* на телефоне — столбцом */
  gap: 16px;
}

@media (min-width: 768px) {
  .cards {
    flex-direction: row;    /* от 768px — в ряд */
  }
}

Ширину, на которой меняется вёрстка, называют брейкпоинтом. Частые значения: 768px (планшет) и 1024px (небольшой ноутбук), но правильнее менять раскладку там, где она начинает ломаться, а не под конкретные устройства.

Mobile first

Обратите внимание на порядок в примере: сначала стили для телефона, а потом медиазапрос min-width «расширяет» вёрстку для больших экранов. Этот подход называется mobile first. Он удобен по двум причинам: мобильная версия обычно проще, а значит, базовый CSS короче, и вы с самого начала думаете о большинстве пользователей.

Как проверять

Не нужно держать под рукой десяток телефонов. В инструментах разработчика есть режим устройства — в Chrome он включается сочетанием Ctrl+Shift+M. Можно выбрать модель телефона или потянуть за край, меняя ширину, и смотреть, где вёрстка ломается.

<section class="about">
  <img src="images/team.jpg" alt="Команда пиццерии на кухне">
  <p>Мы готовим пиццу по неаполитанским рецептам с 2015 года.</p>
</section>

img {
  max-width: 100%;
  height: auto;
}

.about {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .about {
    flex-direction: row;
    align-items: center;
  }

  .about img {
    width: 33%;
  }
}