У сучасному світі користувачі заходять на вебсайти з різних пристроїв — від великих настільних моніторів до невеликих екранів смартфонів. Тому веброзробнику важливо створювати сторінки, які будуть виглядати та працювати зручно за будь-яких умов.
Responsive Web Design (адаптивний вебдизайн, RWD) — це підхід до веброзробки, за якого сторінка автоматично підлаштовується під розмір екрана користувача. Тобто замість створення окремих версій сайту для комп’ютерів, планшетів і телефонів, розробник будує один універсальний макет, що динамічно змінює свій вигляд.
Основна ідея RWD полягає в тому, щоб:
Адаптивний підхід дозволяє зробити сайт більш гнучким, зручним і сучасним, а також покращує користувацький досвід. У цьому навчальному матеріалі ми розглянемо ключові інструменти RWD: viewport, гнучкі сітки, медіа-запити, адаптивні зображення та фреймворки, що допомагають створювати адаптивні інтерфейси швидше.
Під час розробки адаптивних вебсайтів важливо перевіряти, як сторінка відображається на різних пристроях і розмірах екранів. Звісно, неможливо тримати під рукою всі можливі смартфони, планшети чи монітори. Для цього у веброзробників є спеціальний інструмент — Chrome DevTools, що дозволяє імітувати вигляд сайту на різних пристроях безпосередньо на комп’ютері.
У верхній частині панелі DevTools є кнопка Toggle device toolbar (або комбінація клавіш Ctrl+Shift+M).
Вона перемикає перегляд сторінки у режим емуляції різних пристроїв.
У цьому режимі можна:
Вибрати пристрій із готового списку
(наприклад, iPhone SE, iPhone 14, iPad, Samsung Galaxy, Pixel).