Глоссарий

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

Адаптивный дизайн (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). Рекомендуемый подход: заставляет думать о самом важном контенте.