Ось готовий урок, створений за твоїм майстер-промптом. Це не просто суха лекція, а інтерактивна подорож у світ сучасної верстки. Поїхали!

🎨 Урок: Адаптивна типографіка

(Або чому твій сайт має виглядати круто і на годиннику, і на телевізорі)

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

Привіт, друзі! Радий вас бачити.

Уявіть ситуацію. Ви витратили вечір, обираючи ідеальний шрифт для свого блогу. На вашому величезному 27-дюймовому моніторі заголовок виглядає велично, епічно, просто "вау". Ви з гордістю відправляєте посилання другу, а він відкриває його на старенькому iPhone... і бачить ОДНЕ велетенське слово, яке розірвало екран, або, що ще гірше, дрібний текст, який доводиться читати через лупу.

Знайомо?

Чому так стається? Тому що ми часто думаємо про веб-сторінку як про надрукований плакат, який незмінний. Але веб — це не папір. Веб — це вода, яка приймає форму посудини (екрана).

Питання до вас: Якби ви писали текст на повітряній кульці, що сталося б із літерами, якби ви її трішки здули? Вони б стали меншими, вірно? А якби ви писали на цеглині? Літери б залишились такими ж, навіть якби стіна навколо впала.

Сьогодні ми навчимося робити текст "еластичним". Ми зробимо так, щоб ваші користувачі ніколи не мружилися і не скролили горизонтально. Ми поговоримо про адаптивну типографіку.

Без цього сьогодні неможливо створити професійний сайт. Крапка.

2. 🧠 Теоретична база (без сухої академічності)

Давайте заглянемо "під капот".

Раніше всі використовували пікселі (px). Це як прибити картину до стіни цвяхами. Надійно, але якщо стіна переїжджає, картина залишається висіти в повітрі.

Щоб текст був адаптивним, нам потрібні інші інструменти. Ось ваш арсенал:

1. Відносні одиниці: `rem` (замість `px`)

Запам'ятайте головне правило сучасного верстальника: Текст задаємо в rem. * Як це працює: 1rem дорівнює розміру шрифту кореневого елемента (<html>), який за замовчуванням у браузерах — 16px. * Навіщо: Якщо користувач погано бачить і змінив налаштування браузера ("Зробити текст більшим"), rem підлаштується. px — ні. Це про повагу до користувача.

2. Одиниці вьюпорта: `vw` (Viewport Width)

Суть: 1vw = 1% від ширини екрана.
Інтуїтивно: Ширший екран — більший текст. Вужчий екран — менший текст.
Пастка: Якщо ви поставите тільки vw, на телефоні текст стане мікроскопічним, як на етикетці від шампуню.

3. Магія функції `clamp()`

Це Святий Грааль адаптивної типографіки. Вона дозволяє встановити межі. Синтаксис: clamp(МІНІМУМ, БАЖАНЕ, МАКСИМУМ).

Аналогія: Уявіть, що ви надуваєте кульку в коробці. * Вона не може бути меншою за горіх (МІНІМУМ). * Вона хоче займати 50% коробки (БАЖАНЕ). * Але вона не може стати більшою за кавун, навіть якщо коробка розміром з кімнату (МАКСИМУМ).

3. 🧪 Приклади (від простого до реального)

Приклад 1: Стара школа (Media Queries)

Це класичний підхід. Ми кажемо браузеру: "Якщо екран менший за X, зміни розмір".

h1 {
  font-size: 40px; /* Базовий розмір */
}

@media (max-width: 600px) {
  h1 {
    font-size: 24px; /* Зменшуємо для мобільних */
  }
}

Питання: Що станеться, якщо ширина екрана буде 599px? А 601px? Ви бачите різкий стрибок. Це працює, але виглядає трохи "смикано".

Приклад 2: Рідина (Fluid Typography)

Спробуємо використати ширину екрана.

h1 {
  font-size: 5vw; /* 5% від ширини екрана */
}

Очікування: На екрані 1000px шрифт буде 50px. Круто! Реальність: На телефоні (320px) шрифт буде... 16px. Це нормально. Але на великому моніторі (2500px) це буде 125px! Гігантизм.

Приклад 3: Сучасний підхід (`clamp`)

Ось як це роблять профі зараз. Поєднуємо стабільність і гнучкість.

h1 {
  /*
     Мінімум: 2rem (32px)
     Бажане: 5vw (зростає з екраном)
     Максимум: 4rem (64px)
  */
  font-size: clamp(2rem, 5vw, 4rem);
}

Як це працює: 1. На телефоні: 5vw занадто мало, тому браузер бере 2rem. Читабельно. 2. На ноутбуці: 5vw — це ідеально, шрифт плавно росте. 3. На iMac 5K: 5vw було б забагато, тому браузер зупиняється на 4rem.

Ніяких стрибків, повна плавність. Елегантно, правда?

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

Час забруднити руки кодом! Відкривайте редактор (або CodePen).

Завдання 1: Відмова від пікселів Перепишіть цей код, використовуючи rem (вважаємо, що 16px = 1rem). Було: font-size: 24px; Має стати: ...?

Завдання 2: Медіа-запити Напишіть CSS для параграфа <p>. * На десктопі розмір шрифту: 1.25rem. * На планшетах і менше (ширина < 768px): 1rem.

Завдання 3: Майстер Clamp Створіть заголовок <h2>, який: * Ніколи не менший за 1.5rem. * Ніколи не більший за 3rem. * В ідеалі займає 4vw ширини екрана.

Завдання 4: Лінії мають значення (Line-height) Адаптивність — це не тільки розмір шрифту (font-size), а й висота рядка (line-height). Міні-кейс: Коли текст стає меншим (на мобільному), відстань між рядками має бути трохи більшою для кращого читання. А коли текст великий (заголовок) — рядки можна щільніше зсунути. Спробуйте: line-height: calc(1.2 + 0.5rem) — пограйтеся з цим. Що змінюється?

Завдання 5: "А що, якщо..." Уявіть, що ваш заголовок дуже довгий: "Найважливіші новини цього дивного, дивного світу". Що станеться на мобільному телефоні, якщо ви використали clamp(3rem, 10vw, 5rem)? Підказка: Він, ймовірно, не поміститься. Виправте це, змінивши параметри clamp.

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

Як відрізнити новачка від сеньйора в типографіці?

Новачок підбирає розміри "на око" для свого монітора і забуває про інші.
Досвідчений розробник думає діапазонами. Він не питає "як це виглядає на iPhone?", він питає "як це поводиться від 300px до 3000px?".

Типові помилки: * Занадто дрібний текст. Ніколи не робіть основний текст меншим за 1rem (16px). Людям важко читати дрібне, особливо на ходу. * Фіксація висоти контейнера. Якщо ви задали блоку height: 200px, а текст збільшився, він "вилізе" за межі. Ніколи не фіксуйте висоту блоків з текстом! * Ігнорування "Доступності" (Accessibility). Використання px блокує можливість користувача масштабувати текст. Використовуйте rem.

Порада з практики: Використовуйте модульні шкали. Не вигадуйте розміри (15px, 17px, 19px). Виберіть коефіцієнт (наприклад, 1.2) і множте: 1rem, 1.2rem, 1.44rem... Це створить гармонію на сторінці.

6. 🧩 Підсумок

Отже, що ми маємо в сухому залишку?

Ми відмовилися від жорстких пікселів на користь гнучких rem.
Ми дізналися, що vw робить текст "гумовим".
Ми опанували clamp(), щоб тримати цю "гуму" в розумних межах.

Тепер ви вмієте створювати текст, який дихає разом з браузером. Він зручний і на годиннику, і на білборді. Ваші користувачі (і їхні очі) скажуть вам "дякую".

Що далі? Ми навчили текст змінювати розмір. Але що, якщо нам потрібно, щоб текст на комп'ютері був у три колонки, а на телефоні — в одну? На наступному уроці ми розберемо CSS Grid та Flexbox — скелет вашого сайту.

А поки що — практикуйтеся і не бійтеся експериментувати! Це був CS50... тобто, це був наш урок з адаптивної типографіки. 😉

Побачимось!