Глосарій

Адаптивний дизайн

Адаптивний дизайн (Responsive Design) — підхід до верстки, при якому сторінка коректно відображається на будь-якому розмірі екрану: від смартфона до великого монітора. ~60% інтернет-трафіку зараз мобільний.

Ключові інструменти

Fluid Grid — відносні одиниці (%, fr) замість фіксованих пікселів
Flexible Images — max-width: 100%, <picture> з різними src під різні розміри
Media Queries — CSS-правила, що застосовуються при певній ширині екрану

Breakpoints

/* Mobile first */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 24px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; margin: 0 auto; }
}

Mobile First vs Desktop First

Mobile First — базові стилі для мобільного, розширення для більших екранів (min-width). Рекомендований підхід: змушує думати про найважливіший контент.