Lekcja 12 – Responsywność i Media Queries

W dzisiejszym świecie użytkownicy przeglądają strony internetowe na różnych urządzeniach: komputerach, tabletach, smartfonach, itp. Dlatego tworzenie responsywnych stron internetowych stało się standardem. Responsywność pozwala dostosować układ strony do różnych rozmiarów ekranu, dzięki czemu użytkownik otrzymuje optymalne wrażenia niezależnie od urządzenia, z którego korzysta.

Czym są Media Queries?

Media Queries to technika w CSS, która pozwala stosować różne style w zależności od cech urządzenia, takich jak szerokość ekranu, orientacja, rozdzielczość itp. Dzięki temu możemy tworzyć responsywne układy, które automatycznie dostosowują się do różnych rozmiarów ekranu.

Podstawowy przykład Media Queries:

body {
  background-color: lightblue;
}

@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

W tym przykładzie:

• Na urządzeniach o szerokości ekranu mniejszej niż 600px, tło strony zmieni się na zielone.
• Dla większych urządzeń tło pozostanie niebieskie.

Jak działa Media Queries?

Media Queries składają się z dwóch części:

• Media Type – Definiuje typ urządzenia, na którym mają być stosowane style (np. screen, print, all).
• Media Features – Określają specyficzne cechy urządzenia, takie jak width, height, orientation (pion/poziom), resolution i inne.

Przykład składni Media Queries:

@media screen and (max-width: 768px) {
  /* Style dla ekranów o szerokości do 768px */
}

@media screen and (min-width: 769px) {
  /* Style dla ekranów o szerokości od 769px */
}

Najczęściej używane Media Queries

• max-width i min-width: Najczęściej używane do tworzenia responsywnych układów.
  • max-width – Stosuje style, gdy szerokość ekranu jest mniejsza lub równa podanej wartości.
  • min-width – Stosuje style, gdy szerokość ekranu jest większa lub równa podanej wartości.

Przykład:

/* Styl dla dużych ekranów */
.container {
  display: flex;
  justify-content: space-between;
}

/* Styl dla ekranów mniejszych niż 768px */
@media (max-width: 768px) {
  .container {
    display: block;
  }
}

• orientation: Używany do definiowania stylów w zależności od orientacji ekranu (pionowej lub poziomej).
  • orientation: portrait – Stosuje style, gdy urządzenie jest w orientacji pionowej.
  • orientation: landscape – Stosuje style, gdy urządzenie jest w orientacji poziomej.

Przykład:

@media (orientation: portrait) {
  body {
    background-color: lightpink;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Mobile-first design

Współczesne podejście do projektowania stron internetowych opiera się na zasadzie mobile-first. Oznacza to, że najpierw projektujemy stronę dla urządzeń mobilnych, a następnie dostosowujemy ją do większych ekranów.

Przykład mobile-first design:

/* Styl domyślny dla urządzeń mobilnych */
.container {
  display: block;
  padding: 20px;
}

/* Dostosowanie dla większych ekranów */
@media (min-width: 768px) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

Responsywne jednostki miary

Stosowanie responsywnych jednostek miary, takich jak procenty (%), viewport (vw, vh) czy rem/em, może dodatkowo pomóc w dostosowywaniu elementów do różnych rozmiarów ekranu.

• % – Procenty określają rozmiar elementu względem rodzica.
• vw i vh – Viewport width/height to jednostki mierzone jako procent szerokości lub wysokości okna przeglądarki. Przykład: 100vw oznacza 100% szerokości przeglądarki.
• rem i em – Jednostki te są mierzone w odniesieniu do rozmiaru czcionki (rem odnosi się do korzenia dokumentu, a em do elementu nadrzędnego).

Przykład responsywnych jednostek miary:

.container {
  width: 80%; /* 80% szerokości rodzica */
  font-size: 1.5rem; /* 1.5 razy wielkość czcionki bazowej */
}

Responsywne obrazy i media

Obrazy i inne multimedia powinny być również responsywne, aby wyglądały dobrze na wszystkich urządzeniach.

• max-width: 100% – Sprawia, że obraz nie przekroczy szerokości kontenera, w którym się znajduje.
• picture element – Umożliwia używanie różnych wersji obrazu w zależności od rozdzielczości ekranu.

Przykład responsywnego obrazu:

img {
  max-width: 100%;
  height: auto;
}

Przykład picture elementu:

<picture>
  <source media="(min-width: 800px)" srcset="duzy-obraz.jpg">
  <source media="(max-width: 799px)" srcset="maly-obraz.jpg">
  <img src="domyslny-obraz.jpg" alt="Przykładowy obraz">
</picture>

W tym przykładzie przeglądarka wybierze odpowiedni obraz w zależności od rozmiaru ekranu.

Przykłady praktyczne:

Responsywne układy z Grid i Flexbox:

Flexbox i Grid to świetne narzędzia do tworzenia responsywnych układów. Możesz łatwo dostosować liczbę kolumn, rzędy lub sposób, w jaki elementy są rozmieszczane, w zależności od rozmiaru ekranu.

Przykład responsywnego układu z Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

W tym przykładzie układ siatki będzie miał trzy kolumny na większych ekranach, dwie kolumny na średnich i jedną kolumnę na małych ekranach.

Ćwiczenie: Tworzenie responsywnej strony

Stwórz stronę z nagłówkiem, treścią i stopką, która będzie dostosowywać swój układ w zależności od rozmiaru ekranu. Użyj Flexboxa i Media Queries, aby osiągnąć responsywność.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsywna strona</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px;
    }

    header, footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
    }

    main {
      display: flex;
      gap: 20px;
    }

    article, aside {
      background-color: lightgray;
      padding: 20px;
      flex: 1;
    }

    @media (max-width: 768px) {
      main {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <header>
      <h1>Responsywna strona</h1>
    </header>

    <main>
      <article>
        <h2>Główna treść</h2>
        <p>To jest przykładowa treść artykułu.</p>
      </article>
      <aside>
        <h2>Sidebar</h2>
        <p>To jest przykładowy sidebar.</p>
      </aside>
    </main>

    <footer>
      <p>Stopka</p>
    </footer>
  </div>

</body>
</html>

Gratulacje! Ukończyłeś lekcję 12.
Przejdź teraz do lekcji 13 >> CSS Variables (Custom Properties)

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: