---
title: "Media query"
description: "Media query to reguła CSS dopasowująca styl strony do urządzenia. Poznaj składnię breakpointów i rolę media queries w responsywnym web designie."
url: "https://nodea.pl/pl/slownik-pojec/media-query"
lang: "pl"
updated: "2026-07-13"
---

# Media query

> Media query to reguła CSS, która pozwala stosować style warunkowo — w zależności od właściwości urządzenia, takich jak szerokość okna, orientacja czy tryb kolorów. To fundament responsywnego web designu.

**Media query** to mechanizm [CSS](https://nodea.pl/pl/slownik-pojec/css) pozwalający stosować reguły stylów warunkowo — tylko wtedy, gdy urządzenie lub okno przeglądarki spełnia określone kryteria. Dzięki media queries ta sama strona HTML może wyglądać inaczej na telefonie, tablecie i monitorze, bez tworzenia osobnych wersji kodu. To podstawowy budulec [responsywnego web designu](https://nodea.pl/pl/slownik-pojec/responsywnosc).

## Jak działa media query?

Media query składa się z typu nośnika (najczęściej *screen*) oraz jednego lub więcej warunków sprawdzających cechy urządzenia, takie jak *min-width*, *max-width*, orientacja (*orientation*), gęstość pikseli czy preferowany tryb kolorów (*prefers-color-scheme*). Zapisuje się ją regułą *@media*, po której następuje blok stylów aktywowanych tylko wtedy, gdy warunek jest spełniony. Wartości graniczne, przy których układ się zmienia, nazywa się breakpointami. Kluczową rolę odgrywa tu [viewport](https://nodea.pl/pl/slownik-pojec/viewport) — to jego szerokość najczęściej bada media query.

## Zastosowanie w praktyce

Media queries wykorzystuje się do budowy elastycznych układów: na szerokim ekranie strona wyświetla treść w wielu kolumnach z boczną nawigacją, a poniżej wybranego breakpointu zwija menu do „hamburgera” i układa elementy jeden pod drugim. Pozwalają też skrywać lub powiększać przyciski dotykowe, dostosowywać typografię oraz obsługiwać tryb ciemny.

Współczesne podejście zakłada projektowanie w duchu [mobile-first](https://nodea.pl/pl/slownik-pojec/mobile-first-indexing): bazowe style pisze się dla najmniejszych ekranów, a media queries z warunkiem *min-width* stopniowo wzbogacają układ na większych urządzeniach. Ponieważ Google indeksuje strony na podstawie ich wersji mobilnej, poprawnie skonfigurowane media queries są istotne nie tylko dla wygody użytkownika, ale i dla SEO. Frameworki CSS, jak Bootstrap czy Tailwind, opierają swój system siatki właśnie na predefiniowanych breakpointach media query, co przyspiesza budowę responsywnych interfejsów. Warto pamiętać, że nadmierna liczba breakpointów utrudnia utrzymanie kodu — w praktyce wystarcza kilka dobrze dobranych progów odpowiadających realnym klasom urządzeń.

### Czym jest breakpoint w media query?

Breakpoint (punkt przełamania) to konkretna wartość, zwykle szerokość viewportu, przy której układ strony zmienia się na inny — na przykład z jednokolumnowego na dwukolumnowy. Media query z warunkiem typu min-width lub max-width sprawdza, czy urządzenie mieści się w danym zakresie, i dopiero wtedy aktywuje przypisane style.

## Powiązane

- [CSS](https://nodea.pl/pl/slownik-pojec/css)
- [Responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc)
- [Viewport](https://nodea.pl/pl/slownik-pojec/viewport)
- [Mobile-first indexing](https://nodea.pl/pl/slownik-pojec/mobile-first-indexing)
- [Layout](https://nodea.pl/pl/slownik-pojec/layout)

---

Wersje językowe: [en](https://nodea.io/en/glossary/media-query.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)