Hogyan teszik lehetővé a média lekérdezések a reszponzív tervezést?

Question

Accepted Answer

**A média lekérdezések** feltételesen alkalmaznak CSS-t az eszköz jellemzői alapján — leggyakrabban a **viewport szélessége** — lehetővé téve, hogy egy stíluslap telefonokhoz, táblagépekhez és asztali számítógépekhez alkalmazkodjon.

```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; }
}
```

## Mobile-first (min-width) vs desktop-first (max-width)

```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) { ... }
```

A **Mobile-first** (`min-width`) általában előnyben részesítendő: egyszerű alapstílusokat ír kisebb képernyőkhöz, majd fokozatosan hozzáadja az összetettséget a nagyobb képernyőkhöz. Ez általában tisztább, könnyebb CSS-t termel, és megfelel annak, hogy a tartalom hogyan csatornázódik újra.

## Egyéb hasznos lekérdezések

```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 */
```

A `prefers-reduced-motion` és `prefers-color-scheme` a felhasználó *preferenciáira* reagál, nem a képernyő méretére — fontos az akadálymentesítés és a téma tekintetében.

## Feltételek kombinálása

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

## Megjegyzés a jövőről: container queries

A média lekérdezések a **viewport-ra** reagálnak; az újabb **container queries** (`@container`) egy *szülőelement* méretére reagálnak — jobb a valóban újrafelhasználható komponensekhez. Kiegészítik a média lekérdezéseket, nem helyettesítik azokat.

## Miért fontos

A média lekérdezések a reszponzív tervezés alapja — az elrendezés, a térköz és az oszlopok képernyőméretre való alkalmazkodása.

A mobile-first `min-width` megközelítés kezelhetővé tartja a CSS-t, és az előferences lekérdezések (`prefers-reduced-motion`, `prefers-color-scheme`) kiterjesztik a reszponzivitást az akadálymentesítésre és a témára.