Jinsi gani queries za wasilisho zinaruhusu muundo unaofanya kazi?

Question

Accepted Answer

**Queries za wasilisho** zinatatbiri CSS kulingana na sifa za kifaa — mara nyingi **upana wa ufuatiliaji** — na kuruhusu foleni moja ya muundo kulingana na simu, vidonge, na kompyuta za meza.

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

## Simu-kwanza (min-width) vs meza-kwanza (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) { ... }
```

**Simu-kwanza** (`min-width`) kawaida hupendekezwa: unaandika mitindo rahisi ya msingi kwa skrini ndogo, kisha hatua kwa hatua unaongeza ugumu kwa kubwa. Hii kawaida hutengeneza CSS safi na nyepesi zaidi na inakidhi jinsi maudhui yanavyochanganywa.

## Queries nyingine muhimu

```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` na `prefers-color-scheme` hutendeka kwa *mapenzi* ya mtumiaji, si ukubwa wa skrini — muhimu kwa utoaji na tema.

## Kuchanganya masharti

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

## Kidokezo kuhusu siku za baadaye: container queries

Queries za wasilisho hutendeka kwa **ufuatiliaji**; **container queries** mpya (`@container`) hutendeka kwa ukubwa wa *kipengee cha wazazi* — bora kwa sehemu zinazoweza kutumiwa tena. Zinakamilisha queries za wasilisho badala ya kuziondoa.

## Kwa nini inafaa

Queries za wasilisho ndio msingi wa muundo unaofanya kazi — kulingana mpango, nafasi, na safu wima kwa ukubwa wa skrini.

Mkabala wa simu-kwanza `min-width` huweka CSS inayoweza kusimamia, na queries za mapenzi (`prefers-reduced-motion`, `prefers-color-scheme`) kuzidisha wazi kwa utoaji na tema.