Ответ
Адаптивный (responsive) веб-дизайн — это подход к разработке веб-сайтов, при котором их макет и содержимое автоматически подстраиваются под размер экрана и устройство пользователя (ПК, планшет, смартфон).
Основные принципы:
- Гибкая сетка (Fluid Grid): Размеры элементов задаются в относительных единицах (%, vw, vh), а не в пикселях.
- Гибкие медиа (Flexible Media): Изображения и видео масштабируются в пределах своего контейнера (
max-width: 100%). - Медиазапросы (Media Queries): Позволяют применять разные CSS-правила в зависимости от характеристик устройства (ширина, высота, ориентация).
Пример медиазапроса для мобильных устройств:
/* Стили для экранов шириной до 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
.sidebar {
display: none; /* Скрываем боковую панель на малых экранах */
}
body {
font-size: 14px;
}
}Почему это важно? Обеспечивает единый код для всех устройств, улучшает пользовательский опыт и SEO. Тестируется с помощью инструментов разработчика браузера (режим адаптивного дизайна) или сервисов вроде BrowserStack.