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

Адаптивная верстка достигается через комбинацию CSS и HTML техник, чтобы страница корректно отображалась на разных устройствах. Основные подходы: 1. **Медиазапросы (Media Queries)** Позволяют применять стили в зависимости от характеристик устройства (ширина, ориентация и т.д.). ```css @media (max-width: 768px) { .container { width: 100%; } } ``` 2. **Относительные единицы (%, vw, vh, rem, em)** Использование гибких единиц вместо фиксированных (px). ```css .box { width: 80%; font-size: 1.2rem; } ``` 3. **Flexbox и Grid** Современные CSS-модули для создания гибких макетов. ```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` 4. **Viewport meta-тег** Обязателен для корректного масштабирования на мобильных устройствах. ```html ``` Дополнительно: mobile-first подход, ретинизация изображений (`srcset`), CSS-функции (`clamp()`).