Адаптивний дизайн та медіа-запити

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

• Дизайн, який підлаштовується під різні пристрої та розміри екранів

• Дизайн для настільних ПК

• Використання фіксованої ширини елементів

• Дизайн без стилів

Який HTML-тег використовується для встановлення viewport у документі?

• <viewport>

• <meta>

• <header>

• <link>

Яке значення слід додати до метатега viewport для адаптивного дизайну?

• width=800

• width=device-width, initial-scale=1

• width=fullscreen

• initial-scale=2

Яка одиниця виміру найчастіше використовується в адаптивному дизайні?

• px

• em

• rem

• %

Що таке медіа-запити (media queries)?

• Метод адаптації дизайну для різних пристроїв

• Інструмент для створення анімацій

• Сервіс для зберігання медіафайлів

• Додаток для перевірки сайту

Напишіть медіа-запит, який активується для екранів менше 650px.

Який breakpoint найчастіше використовують для планшетів?

• 320px

• 768px

• 1024px

• 1280px

Що означає термін "мобільний перший" (mobile-first)?

• Створення дизайну спершу для мобільних пристроїв

• Використання мобільних додатків замість сайтів

• Ігнорування адаптації для настільних ПК

• Додавання лише вертикального перегляду

Як перевірити адаптивність сайту без мобільного пристрою?

• Змінити масштаб у браузері

• Використати інструменти розробника (DevTools) у браузері

• Змінити кодування HTML

• Завантажити сайт на телефон

Який CSS-інструмент використовується для розташування елементів у гнучкому макеті?

• flexbox

• grid

• float

• box-shadow