import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/# UI/properties/types/Адаптивность (media, container)'/>

# Адаптивность (media, container)

Типы `media` и `container` управляют генерацией адаптивных правил (`@media` и `@container`). Они позволяют масштабировать интерфейс в зависимости от размеров вьюпорта или родительского блока.

В системе выделяют четыре основных типа адаптивности, которые тесно интегрированы с точками останова (breakpoints) дизайна:
- **media**: Генерирует условие `min-width` (от указанной точки и выше). Если передать два значения через запятую (например, `sm,md`), будет сформирован диапазон `(min-width: ...) and (max-width: ...)`.
- **media-max**: Генерирует условие `max-width`. Система автоматически вычитает `1px` из значения точки останова, чтобы исключить наложение стилей на границе.
- **container** / **container-max**: Работают идентично медиа-запросам, но генерируют правила `@container`, позволяя элементу адаптироваться к размеру родителя. Требуют наличия `container-type` у родительского элемента.

Объявить адаптивный запрос можно через шорткат с разделителем `|` (например, `media-max|md`) или явно через свойство `_type`. В качестве значения (`value`) принимаются как ключи дизайна (sm, md, lg), так и конкретные значения (768px).

**Входная конфигурация (`properties.json`):**
```json
{
  "card": {
    "padding": "24px",
    
    "media-max|md": {            // Query по ширине экрана (media-max)
      "padding": "16px"
    },
    
    "mobile": {                  // Явное объявление типа (explicit)
      "_type": "container-max",  // Query по ширине родителя (container-max)
      "value": "400px",
      "padding": "8px"
    },
    
    "container-max|lg": {        // Шорткат для контейнера
       "padding": "20px"
    }
  }
}
```

**Ожидаемый результат генерации (SCSS):**
```scss
.card {
  padding: 24px;

  @media (max-width: 960px) {    // media-max|md
    padding: 16px;
  }

  @container (max-width: 400px) { // _type: container-max
    padding: 8px;
  }
  
  @container (max-width: 1200px) { // container-max|lg
    padding: 20px;
  }
}
```

### Групповое формирование (Media Group)

Специальные типы `media-group`, `media-max-group`, `container-group` и `container-max-group` позволяют автоматически генерировать набор адаптивных правил для всех доступных точек останова (breakpoints), определенных в системе.

Это избавляет от необходимости вручную прописывать каждый медиа-запрос, если логика адаптации одинакова для разных размеров, но должна быть инкапсулирована в отдельные селекторы.

**Пример конфигурации (`properties.json`):**
```json
{
  "button": {
    "group|icon": {
      "_type": "media-group",
      "padding": "8px"
    }
  }
}
```

**Результат генерации (SCSS):**
При использовании `media-group` система создаст вложенные классы для каждого брейкпоинта, добавляя суффикс (например, `iconSm`, `iconMd`):
```scss
.button {
  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
  // и так далее для всех точек останова...
}
```
