Какие знаешь подходы к адаптивности

1. **Mobile First** – начинаем проектировать с мобильных устройств, затем масштабируем на десктоп. ```css /* Базовые стили для мобильных */ @media (min-width: 768px) { /* Адаптация для планшетов/десктопов */ } ``` 2. **Адаптивный дизайн** – использование медиазапросов (`@media`) для разных разрешений. ```css @media (max-width: 600px) { /* Стили для маленьких экранов */ } ``` 3. **Резиновые макеты** – относительные единицы (`%`, `vw`, `vh`, `rem`/`em`) вместо фиксированных (`px`). 4. **Flexbox/Grid** – гибкие системы раскладки, автоматически подстраивающиеся под контейнер. ```css .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` 5. **CSS-фреймворки** (Bootstrap, Tailwind) – готовые адаптивные сетки и компоненты. 6. **Изображения** – `srcset` для ретины, `` для арт-дирекшна. 7. **Viewport-метатег** – контроль масштабирования: ```html ``` 8. **JavaScript-подходы** – определение устройств через `window.matchMedia()`.