Адаптивная верстка — это подход к созданию веб-страниц, при котором их элементы автоматически подстраиваются под размер и характеристики экрана пользователя. Благодаря этому сайт удобно просматривать на компьютерах, планшетах и смартфонах без создания отдельных версий для каждого устройства.
При адаптивной верстке расположение и размеры элементов могут меняться в зависимости от ширины экрана. Например, несколько колонок на компьютере могут перестраиваться в одну на смартфоне, горизонтальное меню — превращаться в бургер-меню, а изображения и текстовые блоки — изменять свои размеры.
Для реализации адаптивной верстки используются HTML и CSS, в том числе медиазапросы, гибкие сетки и относительные размеры элементов. При необходимости поведение отдельных компонентов также может изменяться с помощью JavaScript.
Адаптивная верстка тесно связана с адаптивным дизайном, но эти понятия не полностью совпадают. Дизайн определяет, как интерфейс должен выглядеть и вести себя на разных экранах, а верстка отвечает за техническую реализацию этих решений в браузере.
Качественная адаптация важна не только для внешнего вида страницы. На мобильном устройстве элементы пользовательского интерфейса должны оставаться удобными для нажатия, текст — легко читаться, а контент — отображаться без горизонтальной прокрутки и других проблем.
Адаптивная верстка является стандартной частью современной веб-разработки и позволяет обеспечить удобную работу с сайтом на устройствах с разными размерами экранов.