Lesson5

Lekcja 5: Media Queries – Jak Sprawić, by Twój Strona Wyglądała Świetnie na Każdym Ekranie!

Wprowadzenie

Witaj, przyszły mistrzu stylizacji! 🧐 Jeśli CSS Grid był jak rozstawianie stołów na rodzinnej imprezie, to media queries są jak upewnienie się, że każdy gość ma wygodne krzesło i odpowiednią ilość miejsca. Pomyśl o media queries jak o szefie garderoby dla Twojej strony — dostosują każdy element, od wielkości przycisków po układ tekstu, aby zawsze wszystko wyglądało „jak spod igły”.

Pod koniec tej lekcji będziesz w stanie tworzyć responsywne układy, które będą prezentować się równie dobrze na telefonie, tablecie, jak i na gigantycznym telewizorze u cioci Grażyny. No to co, parz kawę i zaczynamy!

Krok 1: Czym są Media Queries?

Media queries to jak osobisty krawiec dla Twojego CSS. Pozwalają na stosowanie różnych stylów w zależności od rozmiaru ekranu lub typu urządzenia. To jak powiedzenie: „Jeśli ekran ma taką szerokość, użyj tych stylów. Jeśli jest mniejszy — zmień na te.”

Oto prosty przykład:

@media (max-width: 600px) {
    body {
        background-color: lightblue; /* Jasnoniebieskie tło dla małych ekranów */
    }
}

@media (min-width: 601px) {
    body {
        background-color: white; /* Białe tło dla większych ekranów */
    }
}

W tym przykładzie, jeśli szerokość ekranu wynosi 600px lub mniej (czytaj: typowy smartfon), tło zmienia się na jasnoniebieskie. Gdy jest większa — zostaje białe. Proste jak barszcz, prawda?

Krok 2: Stworzenie Responsywnego Układu – Strona, Która Zawsze Wygląda Świetnie!

Zacznijmy od stworzenia małego pliku HTML, aby zobaczyć media queries w akcji. Najpierw utwórzmy nowy folder na projekt:

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

Teraz otwórz index.html w swoim ulubionym edytorze (Vim, VSCode lub Nano — wybór należy do Ciebie!):

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsywny Design z Media Queries</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Witaj na Mojej Responsywnej Stronie!</h1>
    </header>
    <main>
        <p>Ta strona dostosowuje swój układ w zależności od wielkości ekranu. Zmniejsz i powiększ okno przeglądarki, aby zobaczyć magię w akcji!</p>
    </main>
    <footer>
        <p>&copy; 2024 Moja Responsywna Strona</p>
    </footer>
</body>
</html>

CSS

Otwórz styles.css i dodaj następujące style:

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 — Dostosujmy Wygląd! */
@media (max-width: 600px) {
    header, footer {
        padding: 10px;
    }

    main {
        font-size: 14px;
    }
}

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

    header, footer {
        padding: 30px;
    }
}

Krok 3: Uruchomienie Lokalnie z Caddy – Tchnij Życie w Swoje Dzieło!

Czas uruchomić ten wspaniały projekt! Użyjmy Caddy, aby hostować stronę lokalnie. Żadnych skomplikowanych konfiguracji — tylko jedna prosta komenda.

Otwórz terminal i przejdź do folderu projektu:
```
cd ~/Documents/my-css-project/
```
Uruchom lokalny serwer za pomocą Caddy:
```
caddy file-server --listen :8080
```
Otwórz przeglądarkę i wpisz adres:
```
http://localhost:8080
```

Teraz Twój projekt jest dostępny lokalnie! 🎉 Czas pochwalić się swoim responsywnym designem.

Ważna Uwaga: CSS się nie odświeża?

Jeśli zmieniłeś CSS, ale nie widzisz efektów na stronie, przeglądarka może używać starej wersji. Aby to naprawić, zrób twarde odświeżenie:

Windows/Linux: CTRL + F5 lub CTRL + SHIFT + R
Mac: CMD + SHIFT + R

Teraz przeglądarka powinna załadować najnowsze zmiany!

Krok 4: Testowanie Układu – Zmniejsz, Powiększ i Podziwiaj!

Z lokalnym hostingiem otwórz stronę i zacznij zmieniać rozmiar okna przeglądarki. Obserwuj, jak Twój układ dostosowuje się do każdego ekranu, jak szwajcarski zegarek!

Co się dzieje:

Na ekranach 600px lub mniejszych: Tekst i marginesy zmniejszają się, aby wszystko było schludne i zgrabne, jak wypolerowane sztućce.
Na większych ekranach: Rozmiar tekstu rośnie, a marginesy się rozszerzają — więcej przestrzeni dla elegancji, jak w wielkim salonie!

Podsumowanie

Świetna robota, mistrzu stylu! 🎩 Teraz wiesz, jak używać media queries, aby tworzyć responsywne układy, które wyglądają świetnie na każdym ekranie. Nieważne, czy to smartfon, czy olbrzymi monitor — Twoja strona zawsze będzie wyglądać, jak na pokazie mody.

W następnym rozdziale zajmiemy się animacjami i przejściami — dodamy trochę magii do Twojego projektu, aby przyciski tańczyły, a tekst wchodził na ekran jak elegancki kelner. Do zobaczenia i pamiętaj: dobrze ubrana strona to szczęśliwa strona! 😎