Адаптивна верстка (англ. Responsive Web Design) — це підхід до розробки сайту, при якому макет автоматично підлаштовується під розмір екрана пристрою, на якому відкрито сторінку: телефон, планшет, ноутбук, телевізор.
Тобто сайт виглядає зручно й коректно на будь-якому пристрої, без потреби робити окрему мобільну версію.
Як це працює:
Через гнучкі сітки (grid/flexbox), які перебудовують блоки.
За допомогою медіа-запитів (media queries), які змінюють стилі залежно від ширини екрана.
Використовуються відсотки, vw/vh та em, замість фіксованих px.
Зображення масштабуються або замінюються на легші версії.
Основні переваги адаптивної верстки:
- Покращення користувацького досвіду. Користувачі не мусять масштабувати чи скролити вбік.
- SEO-переваги. Google надає перевагу сайтам із mobile-friendly дизайном.
- Економія. Не потрібно створювати окремі мобільні сайти (наприклад, m.site.com).
- Єдина адреса для всіх пристроїв. Полегшує аналітику, просування, обслуговування.
Типові помилки:
Відсутність Viewport мета-тега ()
Величезні зображення, які не масштабуються
Контент виходить за межі екрана (overflow)
Немає тестування на реальних пристроях
