Jak media queries umożliwiają projektowanie responsywne?

Question

Accepted Answer

**Media queries** warunkowo stosują CSS w zależności od charakterystyki urządzenia — najczęściej **szerokości widoku** — pozwalając pojedynczemu arkuszowi stylów dostosować się do telefonów, tabletów i komputerów stacjonarnych.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Dlaczego to ważne

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) jest generalnie preferowany: piszesz proste podstawowe style dla małych ekranów, a następnie progresywnie dodajesz złożoność dla większych. Zazwyczaj skutkuje to czystszym, lżejszym CSS i lepiej pasuje do sposobu, w jaki zawartość się przepakuje.

## Inne przydatne zapytania

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` i `prefers-color-scheme` reagują na *preferencje* użytkownika, nie na rozmiar ekranu — ważne dla dostępności i motywów.

## Łączenie warunków

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Uwaga na temat przyszłości: zapytania kontenera

Media queries reagują na **widok**; nowsze **zapytania kontenera** (`@container`) reagują na rozmiar *elementu nadrzędnego* — lepiej dla naprawdę wielokrotnego użytku komponentów. Uzupełniają media queries, a nie je zastępują.

## Dlaczego to ważne

Media queries są fundamentem projektowania responsywnego — dostosowaniem układu, odstępów i kolumn do rozmiaru ekranu.

Podejście mobile-first `min-width` utrzymuje CSS łatwym do zarządzania, a zapytania preferencji (`prefers-reduced-motion`, `prefers-color-scheme`) rozszerzają responsywność na dostępność i motywy.