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

## Breakpoints

Проект использует следующие breakpoints для адаптивности:

- **Mobile (XS)**: 0 - 575px
- **Small (SM)**: 576px - 767px
- **Tablet (MD)**: 768px - 991px
- **Desktop (LG)**: 992px - 1199px
- **Large Desktop (XL)**: 1200px - 1399px
- **Extra Large (2XL)**: 1400px+

## Адаптивные компоненты

### Header
- **Desktop**: Полная навигация с горизонтальным меню
- **Tablet**: Компактное меню, уменьшенные отступы
- **Mobile**: Мобильное меню с гамбургером, вертикальная навигация

### Menu Page
- **Desktop**: 3-4 колонки сетки блюд
- **Tablet**: 2-3 колонки
- **Mobile**: 1 колонка, полноширинные карточки

### Cart
- **Desktop**: Двухколоночный layout (товары + сумма)
- **Tablet**: Двухколоночный с уменьшенной боковой панелью
- **Mobile**: Одноколоночный, сумма сверху

### Home Page
- **Desktop**: 3 колонки features
- **Tablet**: 2 колонки
- **Mobile**: 1 колонка, вертикальные кнопки

### Footer
- **Desktop**: 3-4 колонки
- **Tablet**: 2 колонки
- **Mobile**: 1 колонка, центрированный текст

### Admin Panel
- **Desktop**: Фиксированный сайдбар 250px
- **Tablet**: Уменьшенный сайдбар 200px
- **Mobile**: Скрытый сайдбар, открывается по клику

## CSS переменные

Используются CSS переменные для единообразия:

```css
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-2xl: 1400px;
```

## Мобильная навигация

Мобильное меню реализовано через:
- Гамбургер-кнопку для открытия/закрытия
- Вертикальный список ссылок
- Overlay эффект
- Плавные анимации открытия/закрытия

## Touch-friendly элементы

Все интерактивные элементы имеют минимальный размер 44x44px для удобства на мобильных устройствах.

## Оптимизация изображений

- Используется `object-fit: cover` для адаптивных изображений
- Lazy loading для изображений (рекомендуется добавить)
- Responsive images с srcset (рекомендуется добавить)

## Тестирование

Рекомендуется тестировать на следующих разрешениях:
- iPhone SE: 375px
- iPhone 12/13: 390px
- iPad: 768px
- iPad Pro: 1024px
- Desktop: 1920px
- Large Desktop: 2560px

## Best Practices

1. **Mobile First**: Стили пишутся сначала для мобильных, затем добавляются медиа-запросы для больших экранов
2. **Flexible Units**: Используются rem, em, %, vw/vh вместо фиксированных px где возможно
3. **Touch Targets**: Минимальный размер 44x44px для кнопок и ссылок
4. **Readable Text**: Минимальный размер шрифта 16px на мобильных
5. **Performance**: Минимизация использования медиа-запросов, использование CSS Grid и Flexbox