Как сделать приложение отзывчивым?

Создание отзывчивого (responsive) приложения

1. Mobile-First подход

Начинаю с мобильного дизайна, затем добавляю стили для больших экранов:

/* Mobile first - базовые стили для мобилки */
.container {
  padding: 8px;
  font-size: 14px;
}

button {
  padding: 8px 12px;
  width: 100%;
}

/* Планшет и выше */
@media (min-width: 768px) {
  .container {
    padding: 16px;
    font-size: 16px;
  }
  
  button {
    width: auto;
  }
}

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

2. Flex и Grid для layout

Использую современные CSS инструменты вместо float:

/* Flex для простых горизонтальных/вертикальных layout'ов */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.header__logo {
  flex: 0 0 auto;
}

.header__menu {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

/* На десктопе - горизонтальное меню */
@media (min-width: 768px) {
  .header__menu {
    flex-direction: row;
  }
}

/* Grid для сложных layout'ов */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

3. Viewport meta tag (обязателен!)

В HTML head добавляю:

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

Это критично для правильного масштабирования на мобильных устройствах.

4. Относительные единицы вместо абсолютных

/* Плохо - абсолютные пиксели */
.container {
  width: 1200px;
  padding: 20px;
  font-size: 16px;
}

/* Хорошо - относительные единицы */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 1.25rem;
  font-size: clamp(14px, 2vw, 16px);
}

5. Responsive изображения

<!-- Базовый способ -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

<!-- Продвинутый - разные картинки для разных разрешений -->
<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

6. Tailwind CSS для responsive дизайна

Tailwind делает responsive стили просто:

<!-- Разные размеры текста -->
<h1 class="text-2xl md:text-3xl lg:text-4xl">Заголовок</h1>

<!-- Скрытие элементов на определенных экранах -->
<nav class="hidden md:flex gap-4">
  <!-- Меню видно только на 768px и выше -->
</nav>

<nav class="md:hidden">
  <!-- Мобильное меню видно только < 768px -->
</nav>

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

<!-- Responsive padding и margin -->
<div class="p-4 md:p-6 lg:p-8 mb-4 md:mb-6">
  Content
</div>

7. Правильная типография для разных экранов

:root {
  /* Мобилка */
  --text-h1: 1.5rem;
  --text-h2: 1.25rem;
  --text-body: 0.875rem;
}

@media (min-width: 768px) {
  :root {
    /* Планшет */
    --text-h1: 2rem;
    --text-h2: 1.5rem;
    --text-body: 1rem;
  }
}

@media (min-width: 1024px) {
  :root {
    /* Десктоп */
    --text-h1: 2.5rem;
    --text-h2: 1.875rem;
    --text-body: 1.125rem;
  }
}

h1 {
  font-size: var(--text-h1);
}

body {
  font-size: var(--text-body);
}

8. Сенсорные элементы и touch targets

На мобилке кнопки должны быть достаточно большими для касания:

/* Minimum 44x44px для сенсорных устройств */
button, a, input {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

@media (min-width: 768px) {
  button, a {
    min-height: auto;
    padding: 8px 12px;
  }
}

/* Избегай hover на мобилке */
@media (hover: hover) {
  button:hover {
    background-color: #e0e0e0;
  }
}

9. Тестирование responsive дизайна

function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    setMatches(media.matches);
    
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

export function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
  const isDesktop = useMediaQuery('(min-width: 1024px)');

  if (isMobile) return <MobileLayout />;
  if (isTablet) return <TabletLayout />;
  return <DesktopLayout />;
}

10. Best Practices для responsive дизайна

• Всегда используй viewport meta tag
• Начинай с мобильного дизайна (mobile-first)
• Используй относительные единицы (rem, em, %)
• Тестируй на реальных устройствах
• Используй Flexbox и Grid вместо float
• Делай изображения responsive (picture, srcset)
• Избегай горизонтального скролла
• Обеспечь достаточный размер touch targets (44x44px)
• Используй CSS media queries или Tailwind breakpoints
• Оптимизируй производительность на медленных сетях

Отзывчивый дизайн — это обязательный стандарт для современных приложений.