Czym jest Responsive Web Design i jak działają media queries?

Czym jest Responsive Web Design i jak działają media queries?

Responsive Web Design (RWD) to podejście do projektowania stron internetowych, które zapewnia ich poprawne i czytelne wyświetlanie na różnych urządzeniach – od smartfonów po duże monitory. Kluczowym elementem responsywności w CSS są tzw. media queries.

Za pomocą media queries możemy warunkowo stosować style – tylko wtedy, gdy spełniony jest dany warunek (np. szerokość ekranu). Dzięki temu możemy np. ustawić inne marginesy, fonty, układ kolumn czy rozmiary elementów – osobno dla telefonów, tabletów i komputerów.

Podstawowa składnia media queries

Media query ma postać warunku z nawiasem i bloku stylów, np.:

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

Efekt działania: kiedy szerokość okna wynosi 600px lub mniej (czyli np. smartfon w pionie), tło strony zmieni kolor. Na szerszych ekranach ten styl nie zadziała.

Media queries – najczęstsze zastosowania

• Zmiana układu – np. z dwóch kolumn do jednej na małych ekranach
• Dostosowanie rozmiarów fontów, marginesów, paddingów
• Ukrywanie lub pokazywanie niektórych elementów
• Tworzenie zupełnie innego stylu dla urządzeń mobilnych

max-width i min-width – jaka jest różnica?

@media (max-width: 768px) { /* dla ekranów 768px i mniejszych */ }

@media (min-width: 769px) { /* dla ekranów większych niż 768px */ }

Dzięki tej parze możemy projektować układ, który automatycznie przełącza się w zależności od szerokości okna.

Jak testować media queries?

Najprościej – otwórz stronę w przeglądarce i zmieniaj szerokość okna. Przeglądarki takie jak Chrome czy Firefox mają też tryb „widoku responsywnego” (w DevTools) – możesz tam szybko przełączać się między popularnymi rozmiarami ekranów.

Ćwiczenie – tło i fonty w zależności od szerokości ekranu

W JSFiddle stwórz stronę z nagłówkiem i akapitem. Dodaj styl, który:

• domyślnie ustawi tło na jasne i większą czcionkę,
• w media query dla max-width: 600px zmniejszy rozmiar tekstu i zmieni kolor tła.

👉 Otwórz JSFiddle i przetestuj kod

<style>
body {
  background-color: #e3f2fd;
  font-family: sans-serif;
  font-size: 18px;
  padding: 30px;
}

@media (max-width: 600px) {
  body {
    background-color: #f8bbd0;
    font-size: 16px;
  }
}
</style>

<h2>Witaj na stronie</h2>
<p>Ten tekst zmieni się w zależności od szerokości ekranu.</p>

Efekt działania: zmniejszając szerokość okna przeglądarki poniżej 600px, zobaczysz, że tło i rozmiar tekstu się zmieniają – to właśnie działanie media queries w praktyce.

Podsumowanie

• Responsywność to dziś absolutny standard – Twoja strona musi wyglądać dobrze wszędzie.
• Media queries pozwalają warunkowo zmieniać styl w zależności od szerokości ekranu.
• To fundament, na którym zbudujesz nowoczesny i użyteczny interfejs.

W kolejnej lekcji dowiesz się, czym jest podejście mobile first i jak planować style w oparciu o najmniejsze ekrany – co jest znacznie skuteczniejsze niż odwrotne podejście.