Делал ли адаптивный интерфейс под разные устройства

Адаптивный интерфейс для разных устройств

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

Что такое адаптивный интерфейс?

Адаптивный интерфейс (Responsive Design) - это дизайн, который автоматически подстраивается под размер экрана пользователя.

Мой опыт: Примеры из проектов

Я реализовал адаптивность для:

• E-commerce сайта - сетка товаров от 1 колоны на мобильных до 4 на десктопе
• Dashboard приложения - переключение между вертикальным и горизонтальным layout
• SPA приложения - адаптивные модальные окна, формы и навигация
• Blog платформы - типографика, spacing, ширина контента под разные экраны

Инструменты и технологии

В своей работе использую:

• Tailwind CSS - встроенные breakpoints (sm, md, lg, xl, 2xl)
• CSS Media Queries - для кастомной стилизации
• CSS Grid и Flexbox - гибкие layout системы
• Next.js Image - оптимизация картинок для разных разрешений
• Chrome DevTools - тестирование на разных устройствах

Пример 1: Адаптивная сетка товаров

export function ProductGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <ProductCard />
      <ProductCard />
      <ProductCard />
      <ProductCard />
    </div>
  );
}

Что происходит:

• Mobile (< 768px): 1 колона - товары занимают полную ширину
• Tablet (768px - 1023px): 2 колоны
• Laptop (1024px - 1279px): 3 колоны
• Desktop (1280px+): 4 колоны

Пример 2: Адаптивная навигация

export function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="bg-white shadow">
      <nav className="max-w-6xl mx-auto px-4 py-4">
        <div className="flex justify-between items-center">
          {/* Логотип всегда видимый */}
          <div className="text-2xl font-bold">Logo</div>

          {/* Меню на десктопе (скрыто на мобильных) */}
          <ul className="hidden md:flex gap-8 text-center">
            <li><a href="/" className="hover:text-blue-600">Главная</a></li>
            <li><a href="/about" className="hover:text-blue-600">О нас</a></li>
            <li><a href="/services" className="hover:text-blue-600">Услуги</a></li>
            <li><a href="/contact" className="hover:text-blue-600">Контакты</a></li>
          </ul>

          {/* Кнопка меню на мобильных (скрыта на десктопе) */}
          <button
            className="md:hidden text-2xl"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            {menuOpen ? "✕" : "☰"}
          </button>
        </div>

        {/* Мобильное меню (раскрывается при клике) */}
        {menuOpen && (
          <ul className="md:hidden mt-4 space-y-2 bg-gray-50 rounded-lg p-4">
            <li><a href="/" className="block py-2 hover:text-blue-600">Главная</a></li>
            <li><a href="/about" className="block py-2 hover:text-blue-600">О нас</a></li>
            <li><a href="/services" className="block py-2 hover:text-blue-600">Услуги</a></li>
            <li><a href="/contact" className="block py-2 hover:text-blue-600">Контакты</a></li>
          </ul>
        )}
      </nav>
    </header>
  );
}

Пример 3: Адаптивная типографика

export function Article() {
  return (
    <article className="max-w-4xl mx-auto px-4">
      {/* Заголовок: 24px на мобильных, 48px на десктопе */}
      <h1 className="text-2xl md:text-4xl font-bold mb-4">
        Как создать адаптивный сайт
      </h1>

      {/* Подзаголовок */}
      <p className="text-base md:text-lg text-gray-600 mb-8">
        Полное руководство для новичков
      </p>

      {/* Основной текст: 16px на мобильных, 18px на десктопе */}
      <div className="text-base md:text-lg leading-relaxed space-y-4">
        <p>
          Адаптивный дизайн критически важен в 2024 году.
          Большинство пользователей заходят с мобильных устройств.
        </p>
        <p>
          При разработке всегда следуй принципу mobile-first:
          сначала дизайн для мобильных, потом расширяй на больших экранах.
        </p>
      </div>
    </article>
  );
}

Пример 4: Адаптивные медиа-запросы (CSS)

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

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

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

  .card-image {
    width: 200px;
    height: auto;
  }
}

/* Десктоп (1024px и выше) */
@media (min-width: 1024px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

Пример 5: Адаптивные формы

export function ContactForm() {
  return (
    <form className="max-w-2xl mx-auto px-4 py-8">
      {/* На мобильных - 1 колона, на десктопе - 2 колоны */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input
          type="text"
          placeholder="Имя"
          className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
        />
        <input
          type="email"
          placeholder="Email"
          className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
        />
      </div>

      {/* Текстовое поле на всю ширину */}
      <textarea
        placeholder="Сообщение"
        rows={6}
        className="w-full mt-4 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
      />

      {/* Кнопка: 100% на мобильных, auto на десктопе */}
      <button className="w-full md:w-auto mt-4 px-8 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
        Отправить
      </button>
    </form>
  );
}

Пример 6: Адаптивные изображения

import Image from 'next/image';

export function Hero() {
  return (
    <section className="relative w-full h-64 md:h-96 lg:h-screen">
      <Image
        src="/hero.jpg"
        alt="Hero image"
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 100vw"
        quality={75}
        className="object-cover"
      />
    </section>
  );
}

Здесь sizes указывает браузеру, какой размер картинки загружать:

• На мобильных (< 768px) - полная ширина (100vw)
• На планшете (768px - 1200px) - половина ширины (50vw)
• На десктопе (> 1200px) - полная ширина

Как я тестирую адаптивность

1. Chrome DevTools (Ctrl+Shift+M)

Тестирую предустановки:
- iPhone 12 (390x844)
- iPad (768x1024)
- Desktop (1920x1080)

2. Playwright E2E тесты

import { test, expect } from '@playwright/test';

test('адаптивность на мобильных', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://example.com');
  
  const menu = page.locator('[data-testid="mobile-menu"]');
  await expect(menu).toBeVisible();
  
  const desktopNav = page.locator('[data-testid="desktop-nav"]');
  await expect(desktopNav).not.toBeVisible();
});

3. Lighthouse аудит

lighthouse https://example.com --view

Tailwind Breakpoints (которые я использую)

Частые ошибки, которые я избегаю

• Горизонтальный скролл - использую max-width containers
• Текст слишком маленький - минимум 16px на мобильных
• Кнопки маленькие - минимум 44x44px (Apple guidelines)
• Картинки растянуты - использую object-fit и aspect-ratio
• Не тестирую на реальных устройствах - исправляю это!

Итог

Адаптивный интерфейс - это не дополнительный навык, а стандартный подход к разработке. Я:

• Начинаю с mobile-first подхода
• Использую Tailwind CSS для быстрой разработки
• Тестирую на разных разрешениях (DevTools, реальные устройства)
• Проверяю производительность (Lighthouse)
• Убеждаюсь, что touch-элементы достаточно большие