Kako medijske poizvedbe omogočajo odzivni oblikovanje?

Question

Accepted Answer

**Medijske poizvedbe** pogojno uporabljajo CSS glede na karakteristike naprave — pogosto **širino prikaza** — in omogočajo, da se en slog prilagodi telefonom, tablicam in namiznim računalnikom.

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

## Mobilni-najprej (min-width) vs namizni-najprej (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) { ... }
```

**Mobilni-najprej** (`min-width`) je na splošno bolj priljubljen: napišete preproste osnovne sloge za majhne zaslone, nato pa progresivno dodajate kompleksnost za večje. To ponavadi ustvari čistejši, lažji CSS in se ujema s tem, kako se vsebina preoblikuje.

## Druge koristne poizvedbe

```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` in `prefers-color-scheme` odzivata na *preference* uporabnika, ne na velikost zaslona — pomembno za dostopnost in temo.

## Kombiniranje pogojev

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

## Opomba o prihodnosti: poizvedbe vsebnika

Mediajske poizvedbe odzivajo na **prikaz**; novejše **poizvedbe vsebnika** (`@container`) odzivajo na velikost *nadrejenega elementa* — bolje za res ponovno uporabljive komponente. Dopolnjujejo medijske poizvedbe namesto da bi jih nadomestile.

## Zakaj je to pomembno

Mediajske poizvedbe so temelj odzivnega oblikovanja — prilagajanje postavitve, razmika in stolpcev na velikost zaslona.

Pristop mobilni-najprej `min-width` drži CSS obvladljiv, in preference poizvedbe (`prefers-reduced-motion`, `prefers-color-scheme`) razširjajo odzivnost na dostopnost in temo.