Медиазапросы и мобильная вёрстка

Учим страницу выглядеть по-разному на телефоне, планшете и мониторе с помощью медиазапросов.

Медиазапрос (@media) применяет блок стилей только при выполнении условия — например, когда ширина экрана меньше заданной.

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

Сайт открывают и на узком телефоне, и на широком мониторе. Макет в три колонки прекрасно смотрится на десктопе, но на телефоне колонки сожмутся в нечитаемые полоски. Адаптивная вёрстка меняет раскладку под размер экрана: на телефоне те же колонки встают друг под друга.

Синтаксис @media

Медиазапрос — это блок, внутри которого обычные правила CSS. Они срабатывают, только если выполнено условие в скобках.

.menu {
  display: flex; /* на десктопе — в ряд */
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column; /* на узком экране — в колонку */
  }
}

Читается так: «если ширина окна 600px или меньше, поставь пункты меню в колонку». На широком экране работает первое правило, на узком — добавляется второе. max-width означает «не шире», min-width — «не уже».

Брейкпоинты

Граница, на которой меняется раскладка, называется брейкпоинтом (точкой перелома). Жёстких стандартов нет, но популярны ориентиры:

Брейкпоинт	Устройства
до 600px	телефоны
600–900px	планшеты
от 900px	десктопы

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

Подход mobile-first

Современная практика — писать базовые стили для мобильного (узкого) экрана, а через min-width добавлять усложнения для широких. Так проще: на мобильном обычно всё в одну колонку, а сложные сетки появляются лишь на больших экранах.

/* базовые стили — для телефона */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* одна колонка */
}

/* планшет и шире — две колонки */
@media (min-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* десктоп — три колонки */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Одна колонка на телефоне, две на планшете, три на десктопе — раскладка плавно усложняется с ростом экрана.

Обязательный тег viewport

Чтобы мобильные браузеры не пытались показать «десктопную» версию в уменьшенном виде, в <head> обязательно добавляют мета-тег:

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

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

Итог

@media (max-width: 600px) применяет стили на экранах не шире 600px.
Подход mobile-first: базовые стили для телефона, усложнения через min-width.
Мета-тег viewport обязателен, иначе адаптив на мобильных не сработает.