Ответ
Адаптивный дизайн (Responsive Design) — это комплексный подход к веб-разработке, направленный на обеспечение оптимального отображения и взаимодействия с сайтом на любом устройстве за счёт гибких макетов, медиазапросов и динамически изменяемых элементов.
Три технических столпа адаптивного дизайна (сформулированы Итаном Маркоттом):
- Гибкие сетки (Fluid Grids): Разметка на основе относительных единиц (проценты), а не фиксированных пикселей.
- Гибкие изображения (Flexible Images): Изображения, которые масштабируются в пределах своих контейнеров (
max-width: 100%). - Медиазапросы (Media Queries): Позволяют применять разные CSS-правила в зависимости от характеристик устройства (ширина, высота, ориентация).
Пример базовой реализации:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
.row::after { content: ""; clear: both; display: table; }
[class*="col-"] { float: left; padding: 15px; width: 100%; }
@media only screen and (min-width: 768px) {
.col-1 { width: 8.33%; } .col-2 { width: 16.66%; } /* ... и т.д. */
.col-9 { width: 75%; } .col-12 { width: 100%; }
}
</style>
</head>
<body>
<div class="row">
<div class="col-9">Основной контент</div>
<div class="col-3">Сайдбар</div>
</div>
</body>
</html>Преимущества: Универсальность, улучшение пользовательского опыта (UX), положительное влияние на SEO. Сложности: Требует тщательного тестирования на множестве устройств, может нуждаться в оптимизации производительности (например, отложенная загрузка изображений).