Какие знаешь способы реализации верстки под разные экраны

1. **Адаптивный дизайн (Responsive Design)** Используется CSS медиазапросы для изменения стилей в зависимости от ширины экрана. ```css .container { width: 100%; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .container { padding: 0 15px; } } ``` 2. **Гибкая верстка (Fluid Layout)** Ширина элементов задается в процентах или `vw/vh`, что позволяет плавно масштабироваться. 3. **Отзывчивые изображения** Использование `srcset` и `sizes` для загрузки оптимального размера изображения. ```html ``` 4. **Mobile-First подход** Сначала верстается мобильная версия, затем добавляются стили для десктопа через `min-width`. 5. **CSS Grid и Flexbox** Позволяют создавать гибкие макеты без жесткой привязки к пикселям. 6. **Viewport units (vw, vh, vmin, vmax)** Позволяют задавать размеры относительно области просмотра. 7. **Фреймворки (Bootstrap, Tailwind)** Упрощают адаптацию за счет готовых классов и сеток. 8. **Динамический JS-подход** Определение размеров экрана через JS и применение соответствующих стилей. ```javascript window.addEventListener('resize', () => { if (window.innerWidth < 768) { document.body.classList.add('mobile'); } else { document.body.classList.remove('mobile'); } }); ```