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="ru">
<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