Lesson5

Урок 5: Media Queries — Як Зробити, Щоб Сайт Виглядав Добре на Будь-якому Екрані!

Огляд

Привіт, майстре дизайну! 🧐 Якщо CSS Grid — це як організувати весілля з безліччю гостей, то media queries — це як підібрати всім гостям правильний розмір сорочки, щоб ні в кого не розійшлися шви. Подумай про media queries, як про кравця для свого CSS — вони допоможуть усе підлаштувати так, щоб на великому екрані сайт виглядав елегантно, а на маленькому — компактно і зручно.

Наприкінці цього уроку ти зможеш створювати адаптивні макети, які виглядатимуть чудово на будь-якому екрані: від телефона до плазми у дядька Вані на кухні. Ну що ж, бери горнятко чаю і вперед!

Крок 1: Що Таке Media Queries?

Media queries — це як персональний кравець для твого CSS. Вони дозволяють застосовувати різні стилі залежно від розміру екрану або типу пристрою. Це як сказати: “Якщо екран ось такий, використовуй ці стилі, а якщо менший — інші.”

Ось простий приклад:

@media (max-width: 600px) {
    body {
        background-color: lightblue; /* Фон стає блакитним для маленьких екранів */
    }
}

@media (min-width: 601px) {
    body {
        background-color: white; /* Білий фон для більших екранів */
    }
}

У цьому прикладі, якщо ширина екрану 600px або менше (думаєш про свій смартфон?), фон стає блакитним. Якщо 601px або більше — залишається білим. Просто, як двічі два, правда?

Крок 2: Створення Адаптивного Макету — Сайт, Який Завжди у Формі!

Давай створимо невеликий HTML-файл, щоб побачити media queries у дії. Спочатку створимо нову папку для проекту:

cd ~/Documents/
mkdir my-css-project
cd ~/Documents/my-css-project/
touch index.html styles.css

Тепер відкрий index.html у своєму улюбленому редакторі (Vim, VSCode або Nano — хто з тобою в бою?):

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивний Дизайн з Media Queries</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Ласкаво просимо на мій адаптивний сайт!</h1>
    </header>
    <main>
        <p>Ця сторінка змінює свій макет залежно від розміру екрану. Зміни розмір вікна браузера, щоб побачити магію на власні очі!</p>
    </main>
    <footer>
        <p>&copy; 2024 Мій Адаптивний Сайт</p>
    </footer>
</body>
</html>

CSS

Відкрий styles.css і додай такі стилі:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
}

header, footer {
    background-color: #3498db;
    color: white;
    padding: 20px;
}

main {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
}

/* Media Queries — Підлаштовуємо Стилі! */
@media (max-width: 600px) {
    header, footer {
        padding: 10px;
    }

    main {
        font-size: 14px;
    }
}

@media (min-width: 601px) {
    main {
        font-size: 18px;
    }

    header, footer {
        padding: 30px;
    }
}

Крок 3: Запускаємо Локально за Допомогою Caddy – Дай Життя Своєму Творінню!

Давай піднімемо цей шедевр! Використаємо Caddy для локального хостингу проекту. Ніяких складних конфігурацій — лише один простий рядок.

Відкрий термінал і перейди до папки проекту:
```
cd ~/Documents/my-css-project/
```
Запусти локальний сервер за допомогою Caddy:
```
caddy file-server --listen :8080
```
Відкрий браузер і переходь на адресу:
```
http://localhost:8080
```

Тепер твій проект запущено на локальному сервері! 🎉 Час продемонструвати свої навички адаптивного дизайну.

Важлива Підказка: CSS не оновлюється?

Якщо ти вніс зміни у CSS, але не бачиш їх на сторінці, браузер може використовувати стару версію з кешу. Щоб це виправити, виконай жорстке оновлення:

Windows/Linux: CTRL + F5 або CTRL + SHIFT + R
Mac: CMD + SHIFT + R

Тепер браузер має перезавантажити сторінку з актуальними змінами.

Крок 4: Перевір Макет — Зміни Розмір і Насолоджуйся!

З локальним хостингом, відкрий сторінку і почни змінювати розмір вікна браузера. Спостерігай, як твій макет змінюється, наче хамелеон!

Що відбувається:

На екранах шириною 600px або менше: Текст і відступи зменшуються для компактного вигляду. Все компактне і акуратне, наче закрутка на зиму.
На більших екранах: Розмір тексту збільшується, а відступи розширюються — більше місця для естетики, наче просторий обідній стіл у бабусі!

Висновок

Молодець, стиліст веб-дизайну! 🎩 Тепер ти знаєш, як використовувати media queries, щоб створювати адаптивні макети, що підлаштовуються під будь-який екран. Хоча б на телефоні, хоч на гігантському моніторі в тата на роботі, твій сайт буде виглядати бездоганно.

У наступному уроці ми поговоримо про анімації та переходи — додамо трохи магії до твого дизайну, наприклад, щоб кнопки танцювали при наведенні чи текст з’являвся плавно, як пан в смокінгу. До зустрічі, і пам’ятай: гарно одягнений сайт — це щасливий сайт! 😎

CSS Media Queries Адаптивний дизайн Веб-дизайн Початківці Caddy Server