Що таке адаптивний вебдизайн?

Неможливо уявити сучасну веб-розробку без адаптивного/респонсивного дизайну. Це дозволяє користувачам однаково зручно користуватися веб-ресурсами на будь-якому пристрої: смартфоні, планшеті, комп'ютері чи телевізорі.

Як це працює?

1. Команда розробників визначає, як виглядатиме кожен елемент залежно від розміру екрана;
2. Необхідні інструкції додаються до коду;
3. Браузер відстежує зміни області перегляду (viewport);
4. Браузер застосовує правила, які команда розробників заклала у вигляді коду.

Медіа-запити

Медіа-запит — це те, що робить можливим адаптивний/респонсивний дизайн. За допомогою цих запитів розробники можуть встановлювати стилі будь-якого елемента залежно від розміру екрана.

Note

Медіа-запит можна сприймати як інструкцію: «Якщо екран користувача — це десктоп, застосувати такі стилі до елемента. Якщо екран користувача — смартфон, застосувати інші стилі до елемента. І так далі.»

Базовий синтаксис медіа-запиту виглядає так:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> — визначає тип пристрою. Можливі значення:
   • all — значення за замовчуванням. Якщо нічого не вказано, правило медіа працює для всіх пристроїв;
   • print — правило медіа працює для пристроїв, що створюють друковані документи, наприклад, принтерів;
   • screen — правило медіа працює для всіх пристроїв із фізичним екраном.
2. <media_feature> — визначає характеристики пристрою. Найпоширеніше використання:
   • min-width: — мінімальна ширина області перегляду;
   • max-width: — максимальна ширина області перегляду.
3. <operator> — тип медіа та характеристика медіа розділяються необов’язковим логічним оператором. Можливі значення: and або ,.

Note

У наступних розділах ми розглянемо використання медіа-запитів на практиці.