Что такое адаптивная версия веб-страницы?

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

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

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

Пример использования медиазапросов:

css