Co to są Media Queries?

Co to są Media Queries?

Media Queries to jeden z filarów nowoczesnego projektowania stron internetowych.
To właśnie dzięki nim Twoja witryna może wyglądać dobrze na każdym urządzeniu – od smartfona, przez tablet, aż po duży ekran monitora.

Bez Media Queries projekt byłby sztywny, a elementy niedopasowane – np. tekst zbyt mały na telefonie, zbyt szeroka siatka na tablecie czy rozjechane zdjęcia na ekranie 4K.

Definicja

Media Query to specjalna konstrukcja w CSS, która pozwala stosować style tylko w określonych warunkach – np. gdy szerokość okna przekracza lub nie przekracza konkretnej wartości.

Przykład:

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

Efekt działania: jeśli szerokość okna przeglądarki wynosi 768px lub mniej – tło strony będzie jasnoróżowe.

Główne zastosowania Media Queries

• Dostosowanie układu (np. kolumny zmieniają się w jeden blok na mobile)
• Zwiększenie rozmiaru czcionki i przycisków dla ekranów dotykowych
• Ukrywanie lub pokazywanie elementów (np. menu desktop vs menu mobilne)
• Dopasowanie marginesów i paddingów do mniejszych ekranów

Składnia Media Query

Typowa media query wygląda tak:

@media (warunek) {
  /* style do zastosowania, gdy warunek jest spełniony */
}

Najczęściej używa się szerokości ekranu jako warunku:

• max-width – styl zadziała, gdy szerokość jest mniejsza lub równa podanej wartości
• min-width – styl zadziała, gdy szerokość jest większa lub równa

Przykład:

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    margin: auto;
  }
}

Łączenie warunków

Możesz też łączyć warunki, np. tylko dla ekranów w poziomie:

@media (min-width: 768px) and (orientation: landscape) {
  .banner {
    height: 300px;
  }
}

Mobile First vs Desktop First

W projektowaniu responsywnym spotkasz dwa podejścia:

• Mobile First – najpierw piszesz style dla urządzeń mobilnych, a później „rozszerzasz” je dla większych ekranów za pomocą min-width.
• Desktop First – odwrotnie: piszesz styl dla desktopu i „przycinasz” go dla urządzeń mobilnych za pomocą max-width.

Dlaczego warto używać podejścia Mobile First?

• Lepsza wydajność – mobile to najczęściej używane urządzenia,
• Użytkownik od razu dostaje najważniejsze style,
• Ułatwia progresywne ulepszanie interfejsu,
• To obecnie standard w większości frameworków CSS (np. Tailwind, Bootstrap).

Praktyczny przykład Mobile First

.card {
  padding: 16px;
  font-size: 16px;
}

@media (min-width: 768px) {
  .card {
    padding: 32px;
    font-size: 18px;
  }
}

Ćwiczenie – sprawdź działanie Media Queries

👉 Otwórz w JSFiddle i przetestuj

<style>
body {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
  background: #e3f2fd;
}

h1 {
  font-size: 24px;
  color: #1565c0;
}

/* styl dla ekranów powyżej 768px */
@media (min-width: 768px) {
  h1 {
    font-size: 36px;
    color: #0d47a1;
  }
}
</style>

<h1>Responsywny nagłówek</h1>

Podsumowanie

• Media Queries to narzędzie w CSS, które umożliwia tworzenie responsywnych stron.
• Dzięki nim możesz stosować różne style zależnie od rozmiaru ekranu, orientacji, rozdzielczości itd.
• Najczęściej używane warunki to min-width i max-width.
• Najlepszym podejściem jest Mobile First, czyli projektowanie z myślą o najmniejszych ekranach i stopniowe rozszerzanie stylu.

W kolejnej lekcji zobaczysz, jak za pomocą Media Queries stworzyć kompletną mobilną wersję strony.