Модуль 16

Responsive design та media queries

Ось урок, створений спеціально за твоїм запитом, у стилі енергійного та харизматичного Девіда Малана.

🎓 Урок: Responsive Design та Media Queries

Або: Як змусити ваш сайт бути "рідким"

Привіт, друзі! 👋

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви купили величезну картину — скажімо, "Мону Лізу". Вона чудова, вона велика, вона в золотій рамі. Ви вішаєте її у вітальні — ідеально. Але потім ви хочете взяти її з собою в літак, у ванну кімнату або навіть покласти в кишеню.

Що станеться? Вона просто не влізе. Вам доведеться або обрізати її (жах!), або зменшити так, що замість посмішки Джоконди ви побачите лише розмиту пляму.

А тепер подивіться на свій смартфон. 📱 Скільки разів ви відкривали старий сайт і бачили крихітний текст, який треба "зумити" пальцями, або меню, що вилазить за межі екрана, змушуючи вас скролити вбік? Це дратує, правда? Це відчуття, ніби ви намагаєтесь просунути рояль у дверцята для кота.

Чому це важливо? Сьогодні більше 55% усього веб-трафіку — це мобільні пристрої. Якщо ваш сайт виглядає погано на телефоні — вважайте, що ваш сайт зламаний для половини людства.

Ми не хочемо створювати "картини в рамах". Ми хочемо бути як вода. Вода приймає форму чашки, пляшки або чайника. Ваш контент має поводитися так само.

Сьогодні ми навчимося магії Responsive Design (Адаптивного дизайну). Поїхали! 🚀

2. 🧠 Теоретична база (без нудьги)

Отже, як ми пояснимо браузеру: "Гей, якщо екран широкий — покажи це, а якщо вузький — перебудуй отак"?

Тут є два головні герої.

Герой №1: Viewport Meta Tag (Паспортний контроль)

Перш ніж писати стилі, ми повинні сказати браузеру телефону: "Не намагайся бути розумним і не масштабуй мій сайт, як звичайну картинку. Я сам розберуся з розмірами".

Це робиться одним рядком у <head> вашого HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Що треба запам’ятати: Без цього рядка медіа-запити на телефонах працюватимуть некоректно. Це як фундамент. Просто скопіюйте і вставте.

Герой №2: Media Queries (Умовна логіка в CSS)

Це і є наші "тригери". У програмуванні ми звикли до if (condition) { do something }. В CSS це виглядає так:

@media (умова) {
    /* CSS правила, які діють ТІЛЬКИ коли умова істинна */
}

Як це працює "під капотом"? Браузер постійно вимірює ширину свого вікна (viewport). Коли ви змінюєте розмір вікна, він перевіряє: "Ага, ширина стала 700 пікселів. Чи є в мене правила для цього?". Якщо так — він миттєво застосовує нові стилі, переписуючи старі.

Це називається Breakpoint (Точка зламу) — ширина, на якій ваш дизайн "ламається" і перебудовується.

3. 🧪 Приклади: від магії до реальності

Давайте подивимось на це в дії.

Приклад 1: Хамелеон 🦎

Найпростіший спосіб зрозуміти — змінити колір.

Запитання до вас: Як ви думаєте, що станеться з кодом нижче, якщо я відкрию його на телефоні (ширина менше 600px)?

body {
    background-color: lightblue; /* Стандартний колір (Десктоп) */
}

@media (max-width: 600px) {
    body {
        background-color: coral; /* Колір для мобільних */
    }
}

Результат: На великому екрані — блакитний фон. Як тільки ви звужуєте вікно браузера і перетинаєте межу в 600px — бам! Фон миттєво стає кораловим.

Приклад 2: Реальний світ (Flexbox перебудова) 📦

Уявіть три картки товару. На комп’ютері вони стоять в ряд (зліва направо). На телефоні місця в ширину немає, тому вони мають стати в стовпчик (зверху вниз).

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.container {
    display: flex;
    flex-direction: row; /* За замовчуванням: в рядок */
    gap: 10px;
}

/* А тепер магія адаптивності */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Змінюємо вісь на вертикальну! */
    }
}

Чому це круто? Ми не змінювали HTML. Ми просто сказали CSS: "Коли тісно, зміни напрямок потоку". Це найпопулярніший патерн в інтернеті.

4. 🛠 Практична частина

Прийшов час забруднити руки кодом! Відкрийте редактор.

Завдання 1: "Світлофор" 🚦 Створіть div розміром 100x100px. * Якщо ширина екрана > 800px — він зелений. * Від 500px до 800px — він жовтий. * Менше 500px — він червоний.

Завдання 2: Зникнення 👻 Часто на мобільних телефонах ми ховаємо великі банери або другорядні елементи. Створіть заголовок <h1>Вітаю на ПК!</h1> і абзац тексту. Зробіть так, щоб на екранах менше 600px заголовок зникав (display: none;), а залишався тільки текст.

Завдання 3: Адаптивне меню (Міні-кейс) 🍔 Створіть навігацію (посилання Home, About, Contact). * На десктопі: вони мають бути праворуч у рядок. * На мобільному: вони мають бути по центру і одне під одним, займаючи всю ширину.

Завдання 4: Питання "А що, якщо..." А що, якщо користувач поверне телефон горизонтально (Landscape)? * Підказка: погугліть @media (orientation: landscape). Спробуйте змінити колір фону саме при повороті екрана.

5. 💡 Мислення як у розробника

Ви вже вмієте писати код, але як думає профі?

1. Mobile First (Спершу мобільні) Новачки часто роблять так: верстають величезний сайт для десктопа, а потім "впихують" його в телефон, використовуючи купу max-width. Це боляче. Профі думають навпаки: Спершу зробіть так, щоб сайт класно виглядав на телефоні (базові стилі). А потім додавайте "навороти" для великих екранів через min-width.

Легше розширити маленьку хатинку до палацу, ніж відрізати кімнати від палацу, щоб він став хатинкою.

2. Не прив’язуйтесь до айфонів Не пишіть брекпоінти типу 375px (тільки тому, що такий екран у вашого iPhone). Телефонів тисячі. Робіть брейкпоінт там, де ваш дизайн починає виглядати погано. Якщо текст надто стиснутий — додайте точку зламу. Дивіться на контент, а не на пристрій.

3. Інструменти розробника (F12) Не звужуйте вікно браузера мишкою, як печерні люди! 🦖 Натисніть F12 -> іконка телефона/планшета (Device Toolbar). Там можна симулювати будь-який пристрій і бачити точні розміри.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що сайт має бути як вода, а не як камінь. 2. Вивчили заклинання @media, яке змінює реальність залежно від ширини екрана. 3. Навчилися перебудовувати сітку з рядків у стовпчики.

Тепер ви можете створювати сайти, які зручно читати і в метро на телефоні, і вдома на величезному моніторі. Ви більше не змушуєте користувачів страждати!

Що далі? Зараз ми рухали елементи вручну. Але що, якби існувала система, яка робить цю сітку автоматично і ще потужніше? Наступного разу ми поговоримо про CSS Grid та фреймворки на кшталт Bootstrap, які зроблять вашу верстку реактивною, як ракета! 🚀

А поки що — практикуйтесь і будьте "responsive"!

(Це був урок в стилі CS50. Успіхів у коді!)

← До списку уроків Наступний урок →