Responsywność – media queries

O czym jest to opracowanie?

Responsywność to zdolność strony internetowej do automatycznego dostosowywania się do różnych rozmiarów ekranów – od smartfonów, przez tablety, po monitory desktopowe. Media queries to mechanizm CSS, który pozwala stosować różne style w zależności od właściwości urządzenia (szerokość ekranu, orientacja, rozdzielczość). W tym opracowaniu poznasz techniki tworzenia responsywnych layoutów zgodnie z podejściem mobile-first.

Dlaczego warto to znać?

Dominacja urządzeń mobilnych – ponad 60% ruchu w internecie pochodzi z telefonów
Google Mobile-First Indexing – Google indeksuje najpierw wersję mobilną strony
UX (User Experience) – użytkownicy oczekują wygodnego przeglądania na każdym urządzeniu
Standard branżowy – każdy frontend developer musi znać responsywność
Egzaminy zawodowe – temat pojawia się na egzaminach INF.03/INF.04

Cel Twojego opracowania

Zrozumieć czym jest responsywność i dlaczego jest niezbędna
Poznać meta tag viewport i jego znaczenie
Opanować składnię media queries w CSS
Umieć wyjaśnić podejście mobile-first vs desktop-first
Stworzyć responsywny layout z praktycznymi przykładami kodu

Zakres obowiązkowy

Elementy merytoryczne

Definicja responsywności
- Czym jest Responsive Web Design (RWD)
- Historia i ewolucja podejścia do różnych urządzeń
- Alternatywy: strony mobilne (m.example.com), aplikacje natywne
Meta tag viewport
- Znaczenie <meta name="viewport">
- Parametry: width, initial-scale, user-scalable
- Konsekwencje braku viewport na urządzeniach mobilnych
Media queries
- Składnia @media w CSS
- Typy mediów: screen, print, all
- Cechy mediów: min-width, max-width, orientation
- Operatory logiczne: and, or (przecinek), not
Podejście mobile-first
- Różnica między mobile-first a desktop-first
- Dlaczego mobile-first jest rekomendowane
- Popularne breakpointy (320px, 768px, 1024px, 1200px)

Wymagane przykłady kodu

Przykład 1

Podstawowa media query – zmiana stylu dla różnych szerokości

Przykład 2

Mobile-first layout – nawigacja responsywna

Przykład 3

Grid responsywny – zmiana liczby kolumn

Przykład 4

Ukrywanie elementów – różne elementy dla mobile/desktop

/* Podstawowa składnia media query */

/* Styl dla wszystkich urządzeń (domyślnie mobile) */
.container {
    width: 100%;
    padding: 10px;
}

/* Styl dla ekranów co najmniej 768px szerokości (tablet) */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* Styl dla ekranów co najmniej 1024px szerokości (desktop) */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 30px;
    }
}

/* Styl dla ekranów co najmniej 1200px szerokości (duży desktop) */
@media screen and (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

/* Orientacja pozioma na urządzeniach mobilnych */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .hero {
        height: 50vh; /* Mniejsza wysokość w orientacji poziomej */
    }
}

/* Style do druku */
@media print {
    .navigation,
    .sidebar,
    .footer {
        display: none;
    }

    body {
        font-size: 12pt;
        color: black;
    }
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nawigacja responsywna</title>
    <style>
        /* Reset i podstawowe style */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* MOBILE FIRST - domyślne style dla telefonów */
        .navbar {
            background: #333;
            padding: 1rem;
        }

        .nav-brand {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-menu {
            display: none; /* Ukryte na mobile */
            list-style: none;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .nav-menu.active {
            display: flex; /* Pokazane po kliknięciu hamburgera */
        }

        .nav-menu a {
            color: white;
            text-decoration: none;
            padding: 0.5rem;
            display: block;
        }

        .hamburger {
            display: block;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

        /* TABLET I DESKTOP - media query */
        @media screen and (min-width: 768px) {
            .navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .nav-menu {
                display: flex !important; /* Zawsze widoczne */
                flex-direction: row;
                gap: 1rem;
                margin-top: 0;
            }

            .hamburger {
                display: none; /* Ukryty na desktop */
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <span class="nav-brand">Logo</span>
        <button class="hamburger" onclick="toggleMenu()">☰</button>
        <ul class="nav-menu" id="navMenu">
            <li><a href="/">Start</a></li>
            <li><a href="/produkty">Produkty</a></li>
            <li><a href="/kontakt">Kontakt</a></li>
        </ul>
    </nav>

    <script>
        function toggleMenu() {
            document.getElementById('navMenu').classList.toggle('active');
        }
    </script>
</body>
</html>

/* Responsywny grid z CSS Grid */

.products-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

/* MOBILE (domyślnie) - 1 kolumna */
.products-grid {
    grid-template-columns: 1fr;
}

/* TABLET (768px+) - 2 kolumny */
@media screen and (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

/* DESKTOP (1024px+) - 3 kolumny */
@media screen and (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding: 2rem;
    }
}

/* DUŻY DESKTOP (1200px+) - 4 kolumny */
@media screen and (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Karta produktu */
.product-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.product-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.product-card h3 {
    padding: 1rem;
    font-size: 1rem;
}

@media screen and (min-width: 768px) {
    .product-card h3 {
        font-size: 1.125rem;
    }
}

/* Klasy pomocnicze do ukrywania elementów */

/* Ukryj na mobile, pokaż na desktop */
.hide-mobile {
    display: none;
}

@media screen and (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

/* Ukryj na desktop, pokaż na mobile */
.hide-desktop {
    display: block;
}

@media screen and (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
}

/* Praktyczne zastosowanie */
.sidebar {
    /* Na mobile sidebar jest ukryty */
    display: none;
}

@media screen and (min-width: 1024px) {
    .sidebar {
        display: block;
        width: 300px;
    }
}

/* Różne obrazy dla różnych urządzeń */
.hero-image-mobile {
    display: block;
    width: 100%;
}

.hero-image-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .hero-image-mobile {
        display: none;
    }

    .hero-image-desktop {
        display: block;
        width: 100%;
    }
}

/* Różna typografia */
h1 {
    font-size: 1.5rem; /* Mobile */
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: 2rem; /* Tablet */
    }
}

@media screen and (min-width: 1024px) {
    h1 {
        font-size: 2.5rem; /* Desktop */
    }
}

Zakres rozszerzony (dla wyższych ocen)

Container queries – nowa funkcja CSS do responsywności komponentów
Fluid typography – clamp() i jednostki viewport (vw, vh)
Responsive images – srcset, sizes, element <picture>
Prefers-reduced-motion – dostępność dla osób wrażliwych na animacje
Prefers-color-scheme – automatyczny dark mode
Narzędzia deweloperskie – testowanie responsywności w przeglądarce

Proponowana struktura pracy

Struktura podstawowa

Wstęp (0.5 strony) – znaczenie responsywności we współczesnym web
Viewport (1 strona) – meta tag viewport, jednostki CSS
Media queries (1.5 strony) – składnia, cechy mediów, operatory
Mobile-first (1 strona) – podejście, breakpointy, zalety
Przykłady praktyczne (1.5 strony) – nawigacja, grid, ukrywanie
Podsumowanie (0.5 strony) – dobre praktyki
Bibliografia

Pytania kontrolne

Czym jest Responsive Web Design i dlaczego jest ważne?
Co robi meta tag viewport i jakie są jego parametry?
Jaka jest różnica między min-width a max-width w media queries?
Dlaczego podejście mobile-first jest rekomendowane?
Jakie są typowe breakpointy i dlaczego akurat te wartości?
Jak połączyć kilka warunków w jednej media query (np. szerokość i orientacja)?
Czym różni się @media screen od @media print?
Jak przetestować responsywność strony bez fizycznego urządzenia?

Najczęstsze błędy

Błąd	Jak poprawić?
Brak przykładu CSS	Każdy rozdział musi zawierać kod CSS
Brak meta viewport	Wyjaśnij jego znaczenie i pokaż składnię
Tylko teoria bez praktyki	Pokaż działające przykłady
Desktop-first bez wyjaśnienia	Uzasadnij wybór podejścia
Sztywne wartości px	Używaj jednostek relatywnych (rem, %, vw)
Brak testowania	Opisz jak testować responsywność

Zasoby

MDN: Media queries Dokumentacja media queries na MDN

CSS-Tricks: Media Queries Kompletny przewodnik po media queries

Responsive Design Mode Testowanie responsywności w Chrome DevTools

Google Mobile-Friendly Test Test przyjazności mobilnej od Google

Do dzieła!

To więcej niż praca zaliczeniowa

Responsywność to absolutna podstawa współczesnego web developmentu. Żadna strona nie może dziś ignorować użytkowników mobilnych. Opanowanie media queries otwiera drogę do zaawansowanych technik CSS.

Wykorzystaj lekcje – konsultuj wątpliwości, pokazuj postępy! Pracuj iteracyjnie – outline -> draft -> kod -> redakcja