મીડિયા ક્વેરીઝ કેવી રીતે પ્રતિક્રિયાશીલ ડિજાઇન સક્ષમ કરે છે?

Question

Accepted Answer

**મીડિયા ક્વેરીઝ** ઉપકરણની લાક્ષણિકતાઓ પર આધારિત શરતી રીતે CSS લાગુ કરે છે — સામાન્ય રીતે **viewport width** — એક જ સ્ટાઇલશીટને ફોન, ટેબ્લેટ અને ડેસ્કટોપમાં અનુકૂલિત થવા દે છે.

```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`) સામાન્ય રીતે પસંદ કરવામાં આવે છે: તમે નાની સ્ક્રીનો માટે સરળ આધાર શૈલીઓ લખો છો, પછી મોટી સ્ક્રીનો માટે ધીમે ધીમે જટિલતા ઉમેરો છો. આ સામાન્ય રીતે સ્વચ્છ, હળવા CSS ઉત્પાદન કરે છે અને સામગ્રી કેવી રીતે પુનઃપ્રવાહ થાય છે તેની સાથે મેળ ખાય છે.

## અન્ય ઉપયોગી ક્વેરીઝ

```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` અને `prefers-color-scheme` *preferences* પર પ્રતિક્રિયા આપે છે, સ્ક્રીન સાઇઝ પર નહીં — સુલભતા અને થીમિંગ માટે મહત્વપૂર્ણ.

## શરતોને સંયોજિત કરવી

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

## ભવિષ્યન એક નોંધ: container queries

મીડિયા ક્વેરીઝ **viewport** પર પ્રતિક્રિયા આપે છે; નવાશીલ **container queries** (`@container`) *parent element's* size પર પ્રતિક્રિયા આપે છે — સાચમાં પુનઃઉપયોગી ઘટકો માટે વધુ સારું. તેઓ મીડિયા ક્વેરીઝને બદલે તેને પૂરક બનાવે છે.

## શા માટે તે મહત્વપૂર્ણ છે

મીડિયા ક્વેરીઝ પ્રતિક્રિયાશીલ ડિજાઇનનું ভিત્તિ છે — લેઆઉટ, spacing અને columns ને સ્ક્રીન સાઇઝમાં અનુકૂલિત કરવું.

મોબાઇલ-first `min-width` અભિગમ CSS ને સંચાલનીય રાખે છે, અને પ્રેફરેન્સ ક્વેરીઝ (`prefers-reduced-motion`, `prefers-color-scheme`) પ્રતિક્રિયાશીલતાને સુલભતા અને થીમિંગ તરફ વધારે છે.