Респонсивний дизайн

Станом на 2024 рік будь яка сторінка в інтернеті повинна вміти підстроюватись під розмір пристрою користувача. Зазвичай цю властивість додають не до окремої сторінки, а до шаблону (дизайну) в цілому. Такий дизайн називають респонсивним (або адаптивним) дизайном.

Головна причина винекнення адаптивного (респонсивного) дизайну стало поширення та розвиток планшетів та смртфонів, так звинних “handled devices” тобто пристроїв якими користуются тримаючі пямо в руках. Логічно, що ці пристрої були достатньо маленькими, що створювало проблеми навіть для “резинового” дизайну.

Для побудови респонсивного дизайну необхідно знати максимальні та мінімальні ширини екранів смартфонів та планшетів. Більш детально про розміри мобільних пристроїв можна подивитись на Wikipedia. Або скористуватись прийнятими обмеженнями які називать брікпоінтами (break-point). Кожний брікпоінт це розмір після прохождення якого пристрий вважаєтся більш маленьким (більш зрозумілим буде на прикладі нижче). В загальному випадку використовуются такі брікпоінти:

• від ∞ до 992px – десктоп(стаціонарний комп’ютер, ноутбук, лептоп), альбомний формат
• від 991px до 768px – планшет, портретний формат
• від 767px до 480px – смартфон, альбомний формат
• від 479px і нижче – смартфон, портретний формат

таким чином, зазвичай робится всього 2-3 брікпоінта на весь дизайн.

Для втілення вище наданих значень використовуются спеціальні CSS конструкції, які називаются медіа-запити (media-query). Суть цих запитів в тому що браузер ігнорує виконання стилів написанних в запиті до того моменту, поки браузер не почне відповідати умові, вказаній в запиті. Будь які медіа-запити починаются з ключової конструкції @media, далі в тілі запиту розміщюєтся селектори та стилі які будуть застосовані до вказанного селектору, якщо медіа-запит виконаєтся.

Найпростіший медіа-запит виглядає так:

@media (max-width: 991px) {
    body {
        background: gray;
    }
}

В наведенному вище прикладі ми змінюємо колір фону сторінки на сірий якщо область екрану менше або дорівнює 991px. В цьому прикладі ми кикористали умову по “верхній” границі планшету в портретному форматі.

Дуже зручно що можна комбінувати декілька умов, а також використовувати max-width та min-width. В контексті медіа-запиту max-width та min-width грають роль не властивості, а вказівника на ширину робочої області (не екрана пристрою) браузера. Більш того, можна використовувати також умови для визначення пристрою виведення, наприклад:

• screen – екран
• print – принтер/плоттер, в цілому виведення на друк
• all – всі пристрої (використовуєтся за замовчуванням, якщо не вказан один з наведенних вище)

Крім max-width та min-width в умові можна використовувати також

• orientation – умова орієнтації (портретна або альбомна)
• height – висота робочої області браузеру
• min-height та max-height – аналогічно що і min- та max- width тільки для висоти
• height та width – жорстка умова для області браузеру (з скролбаром, якщо є)

Принципово є два напрямки побудови, від меньших екранів до більших (так званий mobile-first) або від більших до меньших. Від меньших розмірів до більших є сенс робити якщо ресурс здебільшого використовуєтся на мобільних пристроях.

Для перевірки можна використовувати звичайний браузер комп’ютера. Будь який сучасний браузер дозволяє подивитись на сайт в довільних розмірах вікна. Для браузерів на базі Chromium (Chromium, Google Chrome) достатньо відкрити інструменти розробника (права клавіша миші -> Інспектувати, або Ctrl + Shift + C, або F12) та напискаємо зображення ноутбуку та мобільного телефону (див. скріншот) або просто написнути комбінацію Ctrl + Shift + M.

Область сайту буде змінена на гнучкий фрейм який буде емулювати розмір робочої області браузера. Слід зазначити що такий підхід не буде емулюват особливості та проблеми пристрою.

Якщо є необхідність подивитись дизайн на конкретному пристрої його можна обрати з випадаючого списку зверху. Якщо необхідного пристрою нема у списку, можливо він просто прихований. Для додавання пристрою у випадаючій список треба натиснути на пункт “Редагувати” внизу випадаючого писку і у вікні що відкрилось обрати необхідні девайси, або добати власний.