Dostosowanie układu do różnych rozdzielczości

Dostosowanie układu do różnych rozdzielczości (responsywność)

Twoja strona wygląda już świetnie na komputerze 🖥️ – ale co, jeśli ktoś otworzy ją na telefonie? 📱
Jeśli nie zrobisz nic więcej, użytkownik będzie musiał przewijać stronę na boki albo zobaczy bardzo małe litery i nieczytelny układ.

Dlatego właśnie potrzebujemy tzw. responsywności – czyli dostosowania układu do szerokości ekranu.

🔍 Czym jest responsywność?

Responsywna strona:

🧩 dopasowuje się do szerokości ekranu użytkownika
📏 zmienia układ, rozmiar tekstu, marginesy lub kolumny
📱 wygląda dobrze na telefonie, tablecie i komputerze

Przykład: Na komputerze 3 bloki z ofertą są obok siebie. Na telefonie te same bloki ustawią się jeden pod drugim.

💡 Dlaczego to ważne?

👉 ponad 60% użytkowników przegląda strony na telefonach
👉 Google obniża pozycję w wynikach, jeśli strona nie jest responsywna
👉 strona wygląda bardziej profesjonalnie

📏 Jak to zrobić? – media queries

Do tworzenia responsywnych stylów używamy specjalnych reguł w CSS: @media

Dzięki nim możemy ustawić inne style np. tylko dla ekranów o szerokości do 768px (czyli dla telefonów).

Składnia:

@media (max-width: 768px) {
  /* Tutaj wpisujesz style tylko dla małych ekranów */
}

Co oznacza `max-width: 768px`?

Oznacza: „stosuj te style tylko wtedy, gdy szerokość ekranu wynosi maksymalnie 768 pikseli” (czyli na telefonach i tabletach w pionie).

📄 Przykład bez responsywności

Masz 3 bloki z ofertą, które są ułożone obok siebie na dużym ekranie:

.oferty {
  display: flex;
  gap: 20px;
}

.blok {
  width: 30%;
}

Na telefonie te 3 bloki będą zbyt małe lub wyjdą poza ekran.

📱 Dodaj media queries

Teraz dodaj poniższy kod, aby dostosować wygląd do mniejszych ekranów:

@media (max-width: 768px) {
  .oferty {
    flex-direction: column;
    align-items: center;
  }

  .blok {
    width: 90%;
  }
}

Efekt:

🔄 Bloki ustawią się jeden pod drugim
📏 Każdy blok zajmie 90% szerokości
📱 Tekst i układ będą czytelne na telefonie

🎯 Przykład: pełny kod CSS z responsywnością

.oferty {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.blok {
  background-color: white;
  padding: 20px;
  width: 30%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* Responsywność */
@media (max-width: 768px) {
  .oferty {
    flex-direction: column;
    align-items: center;
  }

  .blok {
    width: 90%;
    margin-bottom: 20px;
  }
}

🧪 Przetestuj w JSFiddle

Wejdź na JSFiddle, wklej swój kod HTML i CSS, a potem:

kliknij Run
w przeglądarce naciśnij F12 i przejdź w tryb mobilny (ikona telefonu)
zmień szerokość ekranu i obserwuj, jak zmienia się układ

❗ Typowe błędy i jak ich uniknąć

📌 Brak `flex-wrap: wrap` – bloki nie łamią się na mniejszych ekranach
📌 Szerokość `px` zamiast `%` – bloki się nie dopasowują
📌 Brak media query – styl zawsze taki sam niezależnie od urządzenia

✅ Podsumowanie

@media pozwala ustawić różne style dla różnych szerokości ekranu
Responsywność to podstawa nowoczesnych stron
Najprostsza wersja: ustaw bloki pionowo i szerokość 90% na telefonie

📌 Nie wszystko musi działać idealnie za pierwszym razem – testuj, próbuj i wracaj do wcześniejszych lekcji!

➡️ Gotowy? W kolejnym kroku wykonasz ćwiczenie końcowe – swoją własną stronę wizytówkę od A do Z 🧠💪

Previous Temat

Back to Zagadnienie

Next Zagadnienie

Dostosowanie układu do różnych rozdzielczości