Адаптивная верстка — это подход к веб-разработке, при котором дизайн и контент страницы автоматически подстраиваются под размер экрана устройства пользователя (десктоп, планшет, смартфон).
Основные принципы:
- Гибкая сетка (Fluid Grids): Использование процентов или других относительных единиц для задания размеров элементов вместо фиксированных пикселей.
- Гибкие изображения (Flexible Images): Изменение размера изображений пропорционально, чтобы они не выходили за пределы контейнера.
- Медиа-запросы (Media Queries): Правила CSS, позволяющие применять разные стили в зависимости от характеристик устройства, таких как ширина экрана, высота, ориентация и разрешение.
Пример использования медиа-запроса в CSS:
css
Цель адаптивной верстки — обеспечить удобство использования сайта на любом устройстве без необходимости создавать отдельные версии страниц.
Тестирование адаптивной версии включает проверку:
- Корректного отображения элементов на разных разрешениях.
- Удобства навигации и взаимодействия.
- Отсутствия горизонтальной прокрутки.
- Читаемости текста.
- Производительности загрузки страницы.