Адаптивна верстка — це технічна реалізація сторінки в коді, за якої одна й та сама HTML-розмітка коректно відображається на будь-якому екрані — від смартфона до широкого монітора — завдяки гнучким сіткам, медіа-запитам CSS і масштабованим зображенням. Це «як зроблено», тоді як адаптивний дизайн — це «як задумано».
Простими словами: дизайн малює, а верстка — оживляє. Можна мати ідеальний макет, який на реальному телефоні «поламається», якщо верстальник схалтурив.
Що таке адаптивна верстка і навіщо вона потрібна
Тут важливо не плутати два шари. Адаптивний дизайн — це підхід, концепція, макети у Figma. Адаптивна верстка — це вже конкретний код, який перетворює ці макети на робочу сторінку. З 2019 року Google індексує насамперед мобільну версію (mobile-first), тож якщо верстка «попливла» на телефоні, страждають і позиції, і конверсія одночасно. По суті, саме на цьому шарі задум або спрацьовує, або ні.
Як реалізується адаптивна верстка
- Гнучка сітка — ширини задають у відсотках,
rem,fr(CSS Grid) або через Flexbox, а не жорсткими пікселями. - Media queries — CSS-правила, що спрацьовують на певних діапазонах ширини (брейкпоінтах).
- Гнучкі зображення —
max-width: 100%, атрибутsrcset, сучасні формати (WebP, AVIF). - Meta viewport — без тега
<meta name="viewport">мобільний браузер покаже «десктоп у мініатюрі».
Синтаксис і приклад коду
Базовий брейкпоінт: @media (max-width: 768px) { .row { flex-direction: column; } }
Обов’язковий у <head>: <meta name="viewport" content="width=device-width, initial-scale=1">
Приклад
Три колонки товарів на десктопі при ширині нижче 768 px перебудовуються в одну через одне медіа-правило. Той самий HTML, без окремої мобільної сторінки — просто CSS «перекладає» розкладку. Якщо ж верстальник забув про viewport, навіть найкращий макет на телефоні буде дрібним і незручним.
Часто плутають з…
- Адаптивний дизайн — це підхід і макети; адаптивна верстка — код, що їх реалізує.
- Гумова (fluid) верстка — усе «тягнеться» у відсотках без брейкпоінтів; адаптивна ж перебудовує розкладку стрибками на певних ширинах.
Питання та відповіді
Чим адаптивна верстка відрізняється від адаптивного дизайну?
Адаптивний дизайн — це підхід і макети (як має виглядати). Адаптивна верстка — це реалізація в коді (CSS, media queries), яка втілює ці макети на реальних пристроях.
Чи впливає адаптивна верстка на SEO?
Так. Через mobile-first indexing Google оцінює мобільну версію, а зручність на телефоні — частина сигналів Page Experience. Неадаптивна верстка б’є по позиціях.
Скільки брейкпоінтів потрібно?
Немає фіксованого числа. Орієнтуються на контент, а не на конкретні моделі — типово це діапазони для мобільних, планшетів і десктопів, але їх ставлять там, де розкладка реально «ламається».
Сайт «пливе» на мобільних? Зробимо коректну адаптивну верстку та виправлення помилок на сайті.
Схожі терміни: Адаптивний дизайн, HTML, PageSpeed, URL.
