6 мин чтения

Адаптивность — сайт на любом экране

70% трафика в 2026 — мобильный. Сайт который ломается на телефоне = сайт который теряет 70% пользователей. Адаптивность — не «красивый бонус», а must-have. К счастью, на современном CSS это просто.

Гибкие единицы

px — фиксированный размер. % — от родителя. em — от размера шрифта родителя. rem — от размера шрифта html (root). vh / vw — % от высоты/ширины viewport. clamp(min, preferred, max) — гибкая граница, особенно крута для шрифтов:

$ font-size: clamp(16px, 4vw, 32px)

сам растягивается между телефоном и десктопом.

Viewport meta — обязательно

В <head> ВСЕГДА должно быть

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

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

media-queries

$ @media (max-width: 768px) { ... }

стили применяются ТОЛЬКО когда экран ≤ 768px (мобильный). min-width — наоборот. Правило: брейкпоинты нужны там где ВЁРСТКА реально ломается, не «потому что 768». Часто используют 640 (планшет), 1024 (ноутбук). Современный подход — без брейкпоинтов где можно (за счёт grid auto-fit, clamp, flex-wrap).

Mobile-first

Принцип: пишем CSS сразу для мобильного, потом расширяем для больших экранов через

$ @media (min-width: ...)

Альтернатива (desktop-first с max-width) тоже работает, но мобильный-first приучает делать сначала ПРОСТО, потом усложнять. И мобильный-first рендерится быстрее (меньше CSS-кода скачивается на телефон).

примерcss

<!-- В <head> ВСЕГДА: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">


/* === MOBILE-FIRST стили (по умолчанию для телефона) === */
.container {
  max-width: 100%;
  padding: 16px;
}

.hero h1 {
  font-size: clamp(28px, 6vw, 48px);   /* 28px на мобиле → до 48px на десктопе */
  line-height: 1.1;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;          /* одна колонка по умолчанию */
  gap: 16px;
}

.nav {
  display: flex;
  flex-direction: column;              /* меню вертикально на мобиле */
  gap: 12px;
}


/* === ПЛАНШЕТ И ВЫШЕ === */
@media (min-width: 640px) {
  .container { padding: 24px }
  .cards     { grid-template-columns: 1fr 1fr }   /* 2 колонки */
  .nav       { flex-direction: row; gap: 24px }   /* меню в строку */
}


/* === ДЕСКТОП === */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; padding: 48px }
  .cards     { grid-template-columns: repeat(3, 1fr) }   /* 3 колонки */
}


/* === ПОДХОД БЕЗ MEDIA-QUERIES (когда возможно) === */
.adaptive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
/* Сама подстроится: на узком — 1 колонка, на широком — сколько влезет */


/* === clamp для шрифтов === */
h1 { font-size: clamp(28px, 5vw, 56px) }    /* плавный рост от 28 до 56 */
p  { font-size: clamp(14px, 2vw, 18px) }


/* === Скрыть/показать на размерах === */
.mobile-only  { display: block }
.desktop-only { display: none }

@media (min-width: 768px) {
  .mobile-only  { display: none }
  .desktop-only { display: block }
}

Адаптивный лендинг на mobile-first подходе

главное

01<meta viewport> обязателен — без него мобильный браузер показывает «уменьшенный десктоп»
02clamp(min, preferred, max) — плавный рост, частая замена media-queries для шрифтов
03Mobile-first: базовые стили для телефона, @media min-width расширяет для больших
04Брейкпоинты: 640 (планшет), 1024 (десктоп) — но реально ставь там где ломается
05auto-fit + minmax в Grid даёт адаптивность без media-queries
06rem для шрифтов и paddings — масштабируется если пользователь увеличил шрифт
07Тестируй в DevTools (responsive mode) — не верь только эмулятору

проверь себя

01Что делает `font-size: clamp(16px, 4vw, 32px)`?

02Mobile-first или desktop-first — что лучше?

03Сайт открывается на телефоне в виде «уменьшенный десктоп», тексты микроскопические. Что забыли?

следующий урок: useEffect — действия извне компонента →