Kaip medijos užklausos įgalina atsakomąjį dizainą?

Question

Accepted Answer

**Medijos užklausos** taikyti CSS sąlyginai pagal įrenginio charakteristikas — dažniausiai **viewport plotis** — leisdamos vienai stilizavimo interneto svetainei pritaikyti prie telefonų, planšetinių kompiuterių ir darbo stočių.

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

## Mobilusis pirmiausia (min-width) palyginti su desktop pirmausia (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) { ... }
```

**Mobilusis pirmiausia** (`min-width`) paprastai yra pageidautinas: jūs rašote paprastus pagrindinius stilius mažiems ekranams, tada palaipsniui pridėdate sudėtingumą didesniems. Tai linkę sukurti švarią, lengvesnę CSS ir atitinka tai, kaip turinis yra pertvarkomas.

## Kitos naudingos užklausos

```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` ir `prefers-color-scheme` reaguoja į vartotojo *nuostatas*, o ne į ekrano dydį — svarbu prieinamumui ir teminiam stilizavimui.

## Sąlygų sujungimas

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

## Pastaba apie ateitį: konteinerio užklausos

Mediaos užklausos reaguoja į **viewport**; naujesnės **konteinerio užklausos** (`@container`) reaguoja į *tėvinio elemento* dydį — geriau iš tikrųjų pakartotinai panaudojamiems komponentams. Jos papildo medijos užklausas, o ne jas keičia.

## Kodėl tai svarbu

Mediaos užklausos yra atsakomojo dizaino pagrindas — prisitaikant išdėstymą, tarpą ir stulpelius prie ekrano dydžio.

Mobilusis pirmiausia `min-width` metodas laikantis CSS valdomas, o nuostatos užklausos (`prefers-reduced-motion`, `prefers-color-scheme`) išplečia atsakomumą į prieinamumą ir temą.