Модуль 17

Mobile-first підхід

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

📱 Тема уроку: Mobile-first підхід

(CS50 Style: Енергійно, з прикладами, від "навіщо" до "як")

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

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

Уявіть, що ви збираєтеся в коротку подорож. У вас є лише маленький рюкзак. Що ви туди покладете? Паспорт, телефон, гаманець, можливо, пляшку води. Тільки найнеобхідніше, правда?

А тепер уявіть іншу ситуацію: у вас є величезна валіза на 30 кілограмів. Ви кидаєте туди все: три пари взуття, фен, улюблену подушку, настільні ігри...

А тепер ключове питання: Що легше зробити? 1. Скласти рюкзак, а потім, якщо дали валізу, докласти туди решту речей? 2. Або запакувати повну валізу, а потім намагатися впихнути цей хаос у маленький рюкзак, панічно викидаючи "зайве"?

Впевнений, ви обрали перший варіант. Це і є Mobile-first.

Раніше веб-розробники робили навпаки: створювали величезні, складні сайти для моніторів (валізи), а потім страждали, намагаючись стиснути їх для телефонів (рюкзаків). Результат? Повільні сайти, дрібний текст, зламані картинки і роздратовані користувачі.

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

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

Давайте розберемося, що це означає технічно.

Mobile-first — це підхід до верстки, коли ми спочатку пишемо стилі для мобільних пристроїв (базові стилі), а потім додаємо правила для планшетів та десктопів, використовуючи медіа-запити (@media).

Як це працює "під капотом"?

Браузер читає ваш CSS зверху вниз. 1. Він бачить базові стилі (для телефону). Застосовує їх. 2. Далі він натрапляє на умову: "Гей, якщо ширина екрану більше 768px (планшет), то зроби ось це...". 3. Якщо умова виконується — він додає або перезаписує нові стилі.

Це називається Progressive Enhancement (Поступове покращення). Ми починаємо з фундаменту і добудовуємо поверхи.

🔑 Що треба запам'ятати (Золоте правило):

У Mobile-first ми використовуємо min-width (мінімальну ширину).

  • ❌ Desktop-first: Ми пишемо для великого, а потім max-width (зменшуємо).
  • ✅ Mobile-first: Ми пишемо для малого, а потім min-width (розширюємо).

Інтуїтивно: Ви не "ламаєте" великий дизайн під телефон. Ви даєте телефону те, що йому треба, а великому екрану кажете: "О, ти великий? Тримай додаткові фішки!"

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

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

Давайте зробимо блок, який на телефоні червоний, а на комп'ютері стає синім.

Питання до вас: Як ви думаєте, якого кольору буде блок, якщо я відкрию його на екрані шириною 500px, маючи код нижче?

/* Базові стилі (для мобільних і всіх інших за замовчуванням) */
.box {
    background-color: red;
    padding: 20px;
}

/* Стилі для екранів, ширших за 768px (планшет/десктоп) */
@media (min-width: 768px) {
    .box {
        background-color: blue;
    }
}

Відповідь: Він буде червоним. Чому? Бо 500px менше за 768px. Браузер проігнорує блок @media.

Приклад 2: Реальний кейс — Меню навігації 🍔

Типова задача: на телефоні посилання йдуть стовпчиком (одне під одним), а на десктопі — в рядок.

/* 1. Спочатку робимо зручно для пальця (Мобільний) */
.nav-link {
    display: block;       /* Кожне посилання займає весь рядок */
    padding: 15px;        /* Великі відступи, щоб легко натиснути */
    border-bottom: 1px solid #ccc;
}

/* 2. Тепер покращуємо для мишки та великого екрану */
@media (min-width: 768px) {
    .nav-link {
        display: inline-block; /* Стаємо в рядок */
        border-bottom: none;   /* Прибираємо лінію */
        padding: 10px 20px;
    }
}

Бачите логіку? Ми не пишемо display: block у медіа-запиті. Воно там за замовчуванням. Ми пишемо лише те, що змінюється на великому екрані. Код чистіший, совість чистіша.

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

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

🔹 Завдання 1: Зміна розміру шрифту

Створіть заголовок <h1>. * На мобільному він має бути 24px. * На екранах від 600px — 32px. * На екранах від 1024px — 48px. * Підказка: Вам знадобиться два блоки @media.

🔹 Завдання 2: "Стовпчик -> Рядок" (Flexbox)

Створіть контейнер із трьома дівами .card. * За замовчуванням (мобільний): вони йдуть вертикально (flex-direction: column). * Від 768px: вони стають горизонтально (flex-direction: row).

🔹 Завдання 3: Виправи помилку новачка

Студент написав код для кнопки, але вона чомусь завжди зелена, навіть на телефоні. Знайдіть логічну помилку в порядку коду:

@media (min-width: 768px) {
    .btn { background-color: green; }
}

.btn {
    background-color: red; /* Мобільний */
}

Питання: Чому CSS (Cascading Style Sheets) працює саме так?

🔹 Міні-кейс: Галерея товарів

У вас є сітка товарів. * Мобільний: 1 товар в рядок (100% ширини). * Планшет: 2 товари в рядок (50% ширини). * Десктоп: 4 товари в рядок (25% ширини). * Реалізуйте це, використовуючи тільки min-width.

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

Як відрізнити новачка від профі в коді?

Новачок думає: "Я зверстаю макет для десктопу, бо мені так зручніше дивитися на моніторі, а потім якось пофікшу для мобілки". 👉 Наслідок: Купа коду на кшталт display: none, щоб сховати великі слайдери на телефоні. Браузер все одно завантажує ці картинки, тратить трафік користувача, а потім просто ховає їх. Це погано.

Профі думає: "Що є найважливішим контентом? Текст статті і кнопка 'Купити'. Покажу це спочатку. А красивий фон і анімацію збоку додам тільки тим, у кого екран дозволяє".

💡 Поради з "полів":

  1. Починайте вузько. Звузьте вікно браузера до мінімуму (або відкрийте DevTools в режимі телефону) і пишіть стилі. Тільки коли стане негарно розтягуватися — додавайте breakpoint.
  2. Не використовуйте складні числа. 768px, 1024px, 1200px — це стандарти. Не робіть медіа-запит на 732px тільки тому, що там слово перенеслось некрасиво.
  3. Контент — король. Якщо щось не влазить на екран телефону, можливо, воно не потрібне і на десктопі? Mobile-first змушує вас бути редактором, а не просто кодером.

6. 🧩 Підсумок

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

  1. Mobile-first — це спочатку база (телефон), потім розширення (десктоп).
  2. Основний інструмент — min-width у медіа-запитах.
  3. Це робить сайт швидшим і код чистішим.

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

🔜 У наступній серії: Ми навчилися розставляти блоки. Але як зробити так, щоб вони самі "танцювали" по екрану, вирівнювалися і заповнювали простір без магії з пікселями? Готуйтеся, наступна тема — Flexbox: Гнучка верстка.

Це був CS50... тобто, ваш урок! До зустрічі! 💻🚀

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