Что такое адаптивная верстка?

Адаптивная верстка — это подход к веб-дизайну и разработке, при котором макет и контент сайта автоматически адаптируются под размер экрана устройства, будь то настольный компьютер, планшет или смартфон. Цель — обеспечить оптимальное отображение и удобство использования на любых разрешениях.

Основные принципы:

• Гибкая сетка (Fluid Grid): Использование относительных единиц измерения (проценты, em, rem) вместо фиксированных пикселей для определения размеров элементов макета.
• Гибкие изображения (Flexible Images): Изображения масштабируются пропорционально размерам контейнера, предотвращая выход за его пределы.
• Медиазапросы (Media Queries): CSS правила, позволяющие применять различные стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация, разрешение.

Типичный пример использования медиазапросов:

css

На практике, при тестирова