Cum permit media queries proiectarea responsivă?

Question

Accepted Answer

**Media queries** aplică CSS în mod condiționat pe baza caracteristicilor dispozitivului — cel mai adesea **lățimea viewport-ului** — permițând unei singure foi de stil să se adapteze la telefoane, tablete și computere de birou.

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

## De ce este important

```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`) este în general preferat: scrieți stiluri de bază simple pentru ecrane mici, apoi adăugați progresiv complexitate pentru cele mai mari. Aceasta tinde să producă CSS mai curat și mai ușor și se potrivește cu modul în care conținutul se reflu.

## Alte interogări utile

```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` răspund la *preferințele* utilizatorului, nu la dimensiunea ecranului — important pentru accesibilitate și tema.

## Combinarea condițiilor

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

## O notă despre viitor: container queries

Media queries răspund la **viewport**; mai noile **container queries** (`@container`) răspund la dimensiunea unui *element părinte* — mai bun pentru componente cu adevărat reutilizabile. Ele completează media queries în loc să le înlocuiască.

## De ce este important

Media queries sunt fundamentul proiectării responsabile — adaptând layout, spațiere și coloane la dimensiunea ecranului.

Abordarea mobile-first `min-width` ține CSS ușor de gestionat, iar interogările de preferință (`prefers-reduced-motion`, `prefers-color-scheme`) extind capacitatea de răspuns la accesibilitate și tema.