Mobile-first подход

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

Зачем нужно

Мобильные устройства имеют ограничения: узкий экран, медленная сеть, сенсорное управление. Если начинать с десктопа, придётся «ужимать» и ломать layout. Mobile-first заставляет сначала продумать минимально необходимый контент и оптимальный мобильный опыт, а потом расширять его. Кроме того, мобильный трафик часто превышает десктопный — браузер на телефоне загружает базовые стили без лишнего CSS. min-width медиазапросы проще поддерживать и масштабировать, чем max-width (desktop-first).

Где используется

  • Все современные CSS-фреймворки (Tailwind, Bootstrap) работают Mobile-first
  • Любой адаптивный сайт или веб-приложение
  • Progressive Enhancement стратегия
  • PWA и гибридные мобильные приложения

Предпосылки

Философия: base → enhanced

Мобильный (базовый)
    │
    ▼  @media (min-width: 576px)
Маленький планшет
    │
    ▼  @media (min-width: 768px)
Планшет
    │
    ▼  @media (min-width: 1024px)
Десктоп
    │
    ▼  @media (min-width: 1280px)
Большой десктоп

min-width = «начиная с этой ширины, ДОБАВЬ эти стили». Базовые стили — для самого маленького экрана.

/* 1. Базовые стили — для мобильных (без медиазапроса) */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* 2. Планшет (≥ 768px) */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
    padding: 24px;
  }
}

/* 3. Десктоп (≥ 1200px) */
@media (min-width: 1200px) {
  .card {
    padding: 32px;
    gap: 32px;
  }
}

Desktop-first vs Mobile-first

Desktop-first (устаревший подход)

/* Десктопные стили */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.sidebar {
  width: 300px;
}

/* Убираем для планшета */
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .sidebar {
    width: 200px;
  }
}

/* Убираем для мобильного */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
}

Mobile-first (правильный подход)

/* Мобильные стили — базовые */
.grid {
  display: grid;
  gap: 16px;
}

/* Планшет — добавляем колонки */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Десктоп — три колонки + сайдбар */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Mobile-first предпочтителен: меньше переопределений, стили наращиваются, а не отменяются.

Типичные брейкпоинты

/* sm — телефон горизонтально и маленький планшет */
@media (min-width: 576px) { ... }

/* md — планшет */
@media (min-width: 768px) { ... }

/* lg — ноутбук */
@media (min-width: 992px) { ... }

/* xl — десктоп */
@media (min-width: 1200px) { ... }

/* xxl — широкий монитор */
@media (min-width: 1400px) { ... }

Progressive Enhancement

/* Шаг 1: Базовый layout (мобильный) */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.main {
  flex: 1;
  padding: 16px;
}

.sidebar {
  padding: 16px;
  border-top: 1px solid #dee2e6;
}

/* Шаг 2: Планшет — сайдбар рядом */
@media (min-width: 768px) {
  .page {
    flex-direction: row;
  }

  .main {
    flex: 1;
    padding: 24px;
  }

  .sidebar {
    width: 250px;
    border-top: none;
    border-left: 1px solid #dee2e6;
  }
}

/* Шаг 3: Десктоп — шире */
@media (min-width: 1024px) {
  .main {
    padding: 32px;
  }

  .sidebar {
    width: 300px;
    padding: 24px;
  }
}

Адаптивный лейаут через grid-template-areas

/* Мобильный: всё в колонку */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  gap: 16px;
}

/* Планшет: 2 колонки */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
  }
}

Типографика Mobile-first

/* Базовый — мобильный */
html {
  font-size: 100%; /* 16px */
}

h1 { font-size: 1.75rem; }   /* 28px */
h2 { font-size: 1.375rem; }  /* 22px */
h3 { font-size: 1.125rem; }  /* 18px */
body { font-size: 1rem; }    /* 16px */

/* Планшет — чуть крупнее */
@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }   /* 36px */
  h2 { font-size: 1.75rem; }   /* 28px */
  h3 { font-size: 1.25rem; }   /* 20px */
}

/* Десктоп */
@media (min-width: 1024px) {
  h1 { font-size: 3rem; }      /* 48px */
  h2 { font-size: 2rem; }      /* 32px */
}

/* Или одной строкой через clamp */
h1 { font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); }

Навигация Mobile-first

/* Мобильная навигация — бургер-меню */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.nav-links {
  position: fixed;
  inset: 0;
  top: 60px;
  background: white;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  transform: translateX(-100%);
  transition: transform 300ms ease;
}

.nav-links.open() {
  transform: translateX(0);
}

.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.burger span {
  width: 24px;
  height: 2px;
  background: #333;
}

/* Десктоп — обычная навигация */
@media (min-width: 768px) {
  .nav-links {
    position: static;
    transform: none;
    flex-direction: row;
    padding: 0;
    gap: 24px;
  }

  .burger {
    display: none;
  }
}

Практический шаблон

/* === БАЗОВЫЕ СТИЛИ (мобильный) === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #333;
}

.container {
  width: 100%;
  padding-inline: 16px;
  margin-inline: auto;
}

/* === ПЛАНШЕТ (≥768px) === */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    padding-inline: 24px;
  }
}

/* === ДЕСКТОП (≥1024px) === */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

/* === БОЛЬШОЙ ДЕСКТОП (≥1280px) === */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

Частые ошибки

  1. Смешивание min-width и max-width — выберите один подход:
    /* ОШИБКА — запутанно */
@media (min-width: 768px) { }
@media (max-width: 600px) { }
/* ПРАВИЛЬНО — только min-width */
@media (min-width: 768px) { }
  2. Дублирование базовых стилей в media query
  3. Забыли viewport meta-тег — обязателен для мобильных
  4. Скрытие контента на мобильном вместо адаптации — если контент важен, адаптируйте его
  5. Тестирование начинают с десктопа — тестируйте сначала на мобильном
  6. Жёсткие пиксельные брейкпоинты — лучше ориентироваться на контент: добавляйте брейкпоинт, когда дизайн «ломается», а не по произвольным числам

Практика

  • Переписать Desktop-first layout на Mobile-first
  • Создать Mobile-first навигацию с бургер-меню
  • Сделать адаптивную типографику через min-width media queries
  • Создать карточную сетку, растущую от 1 до 3 колонок
  • Протестировать на реальном мобильном устройстве

Связанные темы

Ресурсы