Адаптивный дизайн
Подход к веб-дизайну, при котором сайт автоматически подстраивается под размер экрана любого устройства.
Адаптивный дизайн (Responsive Design) — это подход к созданию сайтов, при котором страница автоматически меняет свою структуру и внешний вид в зависимости от размера экрана устройства.
Почему это важно:
- Более 60% трафика приходится на мобильные устройства
- Google использует Mobile-First индексацию
- Улучшает пользовательский опыт
- Снижает показатель отказов
Ключевые технологии:
- CSS Media Queries
- Flexbox и CSS Grid
- Относительные единицы измерения (%, vw, vh, rem)
- Адаптивные изображения (srcset, picture)
Breakpoints (контрольные точки):
- 320px — мобильные телефоны
- 768px — планшеты
- 1024px — ноутбуки
- 1440px+ — десктопы