Верстал ли под мобильные устройства

Опыт разработки под мобильные устройства

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

Responsive Design подход (Mobile-First)

Я использую mobile-first методологию — сначала разрабатываю для мобильных, потом расширяю для десктопа:

/* Мобильная версия (320px и выше) */
.container {
  padding: 16px;
  font-size: 14px;
  flex-direction: column;
}

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

/* Десктоп (1024px+) */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
  }
}

Этот подход экономит CSS и делает код понятнее.

Tailwind CSS для адаптивности

В современных проектах я использую Tailwind с breakpoints:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <Card />
  <Card />
  <Card />
  <Card />
</div>

Здесь:

• grid-cols-1 — 1 колона на мобильных
• md:grid-cols-2 — 2 колоны на планшетах (768px+)
• lg:grid-cols-4 — 4 колоны на десктопе (1024px+)

Tailwind автоматически генерирует CSS, не нужно писать медиа-запросы вручную.

Гибкий layout с Flexbox и Grid

Для адаптивности использую Flexbox и CSS Grid:

/* Flexbox для навигации */
.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Grid для каталога */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

auto-fit и minmax() автоматически адаптируют колоны без медиа-запросов.

Метаметаг viewport

Обязательно добавляю в HTML:

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

Без этого мобильные браузеры масштабируют страницу странно.

Touch-friendly интерфейсы

На мобильных нужны большие кнопки и интерактивные элементы:

/* Минимум 44x44px для сенсорных кнопок */
button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Достаточное расстояние между элементами */
.button-group {
  display: flex;
  gap: 16px; /* Не менее 12-16px на мобильных */
}

Оптимизация изображений

Для мобильных критична оптимизация изображений:

import Image from "next/image";

<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  quality={75}
/>

Здесь:

• sizes — загружает нужный размер для девайса
• quality=75 — уменьшает размер файла
• Next.js автоматически создаёт несколько версий изображения

Тестирование на мобильных

Я проверяю мобильную версию несколькими способами:

1. DevTools Chrome — Ctrl+Shift+M для эмуляции мобильного
2. Реальные девайсы — иногда на сайте нужна физическая проверка
3. E2E тесты с Playwright — автоматизированная проверка адаптивности
4. Lighthouse — в Chrome DevTools, проверяет performance и accessibility

# Запуск Lighthouse из CLI
lighthouse https://example.com --view

Практические примеры

Адаптивный навигационный меню:

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="bg-white shadow">
      <div className="max-w-6xl mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          {/* Логотип видимый всегда */}
          <div className="font-bold text-lg">Logo</div>
          
          {/* Меню на десктопе */}
          <ul className="hidden md:flex gap-6">
            <li><a href="#">О нас</a></li>
            <li><a href="#">Услуги</a></li>
            <li><a href="#">Контакты</a></li>
          </ul>
          
          {/* Бургер на мобильном */}
          <button
            className="md:hidden"
            onClick={() => setIsOpen(!isOpen)}
          >
            ☰
          </button>
        </div>
        
        {/* Мобильное меню */}
        {isOpen && (
          <ul className="md:hidden pb-4">
            <li><a href="#" className="block py-2">О нас</a></li>
            <li><a href="#" className="block py-2">Услуги</a></li>
            <li><a href="#" className="block py-2">Контакты</a></li>
          </ul>
        )}
      </div>
    </nav>
  );
}

Типичные проблемы и решения

Итог

Мобильная разработка — это не отдельный навык, а стандартный подход. Используя modern CSS (Flexbox, Grid), фреймворки (Next.js, Tailwind) и правильное тестирование, можно создавать быстрые и удобные мобильные интерфейсы.