Як зробити додаток responsive?

Повне пояснення

Що це і навіщо Responsive дизайн забезпечує коректне відображення сайту на різних пристроях, зменшуючи потребу в окремих версіях.

Ключові принципи

• viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
• медіа-запити: @media (max-width: 768px) { … }
• flexbox і CSS Grid для гнучких макетів.

Як це працює Медіа-запити змінюють властивості CSS в залежності від ширини viewport. Flexbox розподіляє простір між елементами, а Grid дозволяє створювати складні сітки.

Практика і реалізація

/* Базовий макет */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

Тестування DevTools → Device Mode, перевірка розмірів і поведінки елементів.

Оптимізація продуктивності

• Використання min-width/max-width замість width для зменшення перерисовок.
• Lazy loading медіа-запитів через prefetch/preload.

Accessibility

• Переконатися, що контрастність та розміри шрифту відповідають WCAG.

Безпека та валідація

• Уникайте inline‑стилів, що можуть бути змінені JS.

Типові помилки й edge cases

• Забудьте про meta viewport → скролл на мобільних.
• Перевищення ширини контейнера через margin: auto → горизонтальний скролл.

Cheatsheet + follow‑up питання

• Як працює flex-basis у контексті responsive?
• Які переваги Grid над Flexbox для складних макетів?