Conas a fhéadann media queries dearadh atbhreacsúil a bhaint amach?

Question

Accepted Answer

**Cuireann media queries** CSS i bhfeidhm go coinníollach bunaithe ar shaintréithe an ghléis — den chuid is mó an **leithead an viewport** — rud a fhéadann fhad-scéal stílí amháin a oiriúnú do ghutháin, tábhlaí agus deasctóipeanna.

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

**Mobile-first** (`min-width`) is fearr a roghnú go ginearálta: scríobhann tú stílí bonn simplí do scáileáin bheaga, agus ansin cuireann tú castacht ar bharr a laghad níos fearr ar chéile. Bíonn CSS níos glaine agus níos éadromchúisí ann go hiondúil, agus meaitseálann sé an chaoi ar athscríobhtar ábhar.

## Iarratais úsáideacha eile

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

**Freagraíonn** `prefers-reduced-motion` agus `prefers-color-scheme` do *thosaighde* an úsáideora, ní go méid an scáileáin — tábhachtach do inrochtaineacht agus dathúchán téama.

## Coinníollacha a chur le chéile

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

## Nóta ar an todhchaí: container queries

Freagraíonn media queries don **viewport**; freagraíonn na **container queries** níos nuaí (`@container`) do mhéid *eilimint thuismitheora* — níos fearr do chomhpháirteanna atáthach. Foluain siad ar media queries seachas iad a athsholáthar.

## Cén fáth a bhfuil sé tábhachtach

Media queries a bhunús dearadh atbhreacsúil — leagan, spásanna agus colúin a oiriúnú go méid an scáileáin.

Coimeádann an t-iarratais `min-width` mobile-first CSS inbhainistríochta, agus leathnaíonn iarratais thosaighde (`prefers-reduced-motion`, `prefers-color-scheme`) atbhreacsúilacht go inrochtaineacht agus dathúchán téama.