Адаптивная вёрстка
Адаптивная вёрстка — это подход к созданию сайта, при котором страница корректно отображается на любом устройстве: смартфоне, планшете, ноутбуке и широком мониторе. Ширина экрана определяет, как именно перестроится макет: трёхколоночная сетка на десктопе превращается в одну колонку на мобильном, изображения масштабируются, шрифты увеличиваются для удобочитаемости. Всё это происходит автоматически — один и тот же HTML-документ по-разному интерпретируется браузером в зависимости от размера окна.
Адаптивную вёрстку часто путают с мобильной версией сайта. Разница принципиальная: мобильная версия — это отдельный сайт на отдельном адресе (обычно m.site.ru) с упрощённым контентом и независимой кодовой базой. Такой подход требует двойной поддержки: обновлять нужно оба сайта. Адаптивный же сайт — один, с единым URL. Поисковые системы ценят его выше: Google официально рекомендует responsive design как предпочтительный стандарт, а мобильная индексация (Mobile-First Indexing) означает, что именно мобильная версия страницы учитывается при ранжировании.
Технически адаптивность реализуется через CSS-медиазапросы (media queries). Правило вида @media (max-width: 768px) применяется только когда ширина экрана не превышает 768 пикселей — браузер перестраивает блоки по другим правилам. На этом строятся гибкие сетки (flexbox, CSS grid) и относительные единицы (%, vw, rem) вместо фиксированных пикселей. Хорошо написанная адаптивная вёрстка не ломается ни на одном из промежуточных размеров — проверить это можно через инструменты разработчика в браузере, перетаскивая границу окна.
Пример: агентство запускает лендинг с формой заявки. На десктопе форма стоит справа от текста в двухколоночном блоке. На смартфоне (ширина 390 пикселей) медиазапрос перестраивает блок в одну колонку: текст сверху, форма снизу, кнопка растягивается на всю ширину, чтобы по ней было удобно нажимать пальцем. Без адаптивной вёрстки мобильный пользователь увидел бы уменьшенную копию десктопного макета с нечитаемым шрифтом и крошечными кнопками — и ушёл бы, не оставив заявку. По данным Яндекса, более 60% поисковых запросов в России приходят с мобильных устройств, поэтому адаптивность сайта давно перестала быть опцией и стала базовым требованием.