Advanced Frontend - онлайн платформа для повышения навыков фронтенд-разработки

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

Что такое адаптивность?

Для решения задачи «хорошего» отображения страниц существует два основных подхода. Первый заключается в том, что для разных устройств создаются отдельные версии сайта и затем на основе параметров запросов от пользователей сервер отдаёт нужную версию.

Другим подходом является использование адаптивности.

Адаптивность в веб‑интерфейсах (англ. responsive web design) — подход к разработке сайтов, при котором интерфейс автоматически подстраивается под размеры экрана и разрешение устройства пользователя. Цель — обеспечить удобное взаимодействие с контентом на любом гаджете: смартфоне, планшете, ноутбуке, телевизоре с доступом в интернет и т. д.

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

Например, на сайте может быть использован следующий подход для меню:

На десктопе: меню развёрнуто в строку, контент — в 3 колонки, видны все виджеты.
На планшете: меню остаётся, контент переходит в 2 колонки, второстепенные блоки уменьшаются.
На смартфоне: меню сворачивается в «бургер»-иконку, блоки выстраиваются вертикально, некоторые элементы скрываются в выпадающие списки.

Важно помнить, что адаптивность — это не просто «уменьшить всё». Когда мы говорим об адаптивности, подразумевается изменение структуры, размеров, отступов и поведения элементов.

Базовая настройка

Для того чтобы страница стала адаптивной, необходимо в первую очередь сообщить браузеру о том, что содержимое страницы может перестраиваться. Для этого существует специальный тег, указываемый в <head>:

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

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

Медиазапросы

В CSS для адаптивной вёрстки используются медиазапросы (media queries). Медиазапрос — это специальная CSS-конструкция, которая позволяет применять стили только при выполнении определённых условий, например когда ширина экрана меньше заданного значения.

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

@media (условие) {
  /* CSS-правила, которые применятся только при выполнении условия */
}
css

Самое частое условие — проверка ширины экрана. Для этого используются ключевые слова max-width и min-width.

max-width означает «применить стили, если ширина экрана не больше указанного значения». Например:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
css

Это правило изменит направление flex-контейнера на вертикальное, но только на экранах шириной до 768 пикселей включительно.

min-width работает наоборот: «применить стили, если ширина экрана не меньше указанного значения»:

@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}
css

Это правило отобразит боковую панель только на широких экранах.

Точки останова (breakpoints)

Значения ширины экрана, при которых меняется макет, называют точками останова (breakpoints). Нет единого стандарта, но есть распространённые значения, которые сложились на практике исходя из размеров популярных устройств:

Устройство	Типичный диапазон
Смартфон (портрет)	до 480px
Смартфон (альбом) / маленький планшет	до 768px
Планшет	до 1024px
Десктоп	от 1024px и выше

На практике разработчики чаще всего используют 2–3 точки останова — для мобильных, планшетов и десктопа.

Mobile-first и desktop-first

Существует два подхода к написанию адаптивных стилей.

Desktop-first — сначала пишем стили для десктопа, затем с помощью max-width переопределяем их для меньших экранов. Это традиционный подход, который удобен, если сайт изначально проектируется для десктопа.

/* Базовые стили — для десктопа */
.features-list {
  display: flex;
  flex-direction: row;
}

/* Переопределяем для планшетов */
@media (max-width: 1024px) {
  .features-list {
    flex-wrap: wrap;
  }
}

/* Переопределяем для мобильных */
@media (max-width: 768px) {
  .features-list {
    flex-direction: column;
  }
}
css

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

/* Базовые стили — для мобильных */
.features-list {
  display: flex;
  flex-direction: column;
}

/* Расширяем для планшетов */
@media (min-width: 768px) {
  .features-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Расширяем для десктопа */
@media (min-width: 1024px) {
  .features-list {
    flex-wrap: nowrap;
  }
}
css

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

Комбинирование условий

В медиазапросе можно одновременно задать несколько условий с помощью ключевого слова and:

@media (min-width: 768px) and (max-width: 1024px) {
  /* стили применятся только для планшетов */
}
css

Кроме размеров экрана существуют и другие условия для медиазапросов. Например, orientation позволяет проверить ориентацию устройства:

@media (orientation: portrait) {
  /* устройство держат вертикально */
}

@media (orientation: landscape) {
  /* устройство держат горизонтально */
}
css

Полный список возможных условий можно найти в документации MDN.

Итого

В этом уроке мы разобрали основной инструмент адаптивной вёрстки — медиазапросы. Теперь вы умеете:

добавлять метатег viewport для корректного отображения на мобильных;
писать медиазапросы с условиями max-width и min-width;
использовать точки останова для разных групп устройств;
применять оба подхода — desktop-first и mobile-first.

В следующем уроке применим медиазапросы на практике и сделаем нашу страницу о Санкт-Петербурге полностью адаптивной.

Адаптивность. Медиазапросы