Как реализуется адаптивная верстка элементов страницы

Адаптивная вёрстка достигается через комбинацию CSS-медиазапросов, относительных единиц и гибких макетов. **Ключевые подходы:** 1. **Медиазапросы** (`@media`): ```css @media (max-width: 768px) { .element { width: 100%; } } ``` Позволяют применять стили в зависимости от ширины экрана. 2. **Относительные единицы** (`%`, `vw`, `rem`): ```css .container { width: 90%; } /* Ширина 90% от родителя */ .text { font-size: 2rem; } /* Относительно корневого размера шрифта */ ``` 3. **Flexbox/Grid**: ```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` Автоматически адаптируют сетку под доступное пространство. 4. **Viewport meta-тег**: ```html ``` Корректное отображение на мобильных устройствах. **Дополнительно:** - Используйте `picture` для адаптивных изображений. - Тестируйте на реальных устройствах или через DevTools (режим адаптивности).