ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਕਿਵੇਂ ਜਵਾਬੀ ਡਿਜ਼ਾਈਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦੀਆਂ ਹਨ?

Question

Accepted Answer

**ਮੀਡੀਆ ਕਿਊਰੀਜ਼** ਡਿਵਾਈਸ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ — ਬਹੁਤਾ ਹੀ **viewport ਚੌੜਾਈ** — ਦੇ ਅਧਾਰ 'ਤੇ CSS ਨੂੰ ਸ਼ਰਤ ਅਨੁਸਾਰ ਲਾਗੂ ਕਰਦੀਆਂ ਹਨ, ਜਿਸ ਨਾਲ ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਫੋਨਾਂ, ਟੈਬਲੇਟਾਂ ਅਤੇ ਡੈਸਕਟਾਪਸ ਲਈ ਢਾਲ ਸਕੇ।

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

## ਮੋਬਾਈਲ-ਪਹਿਲੀ (min-width) ਬਨਾਮ ਡੈਸਕਟਾਪ-ਪਹਿਲੀ (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) { ... }
```

**ਮੋਬਾਈਲ-ਪਹਿਲੀ** (`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` ਯੂਜ਼ਰ *ਤਰਜੀਹਾਂ* ਦੇ ਜਵਾਬ ਵਿੱਚ ਹਨ, ਸਕ੍ਰੀਨ ਸਾਈਜ਼ ਵਿੱਚ ਨਹੀਂ — ਪਹੁੰਚ ਅਤੇ ਥੀਮਿੰਗ ਲਈ ਮਹੱਤਵਪੂਰਨ।

## ਸ਼ਰਤਾਂ ਨੂੰ ਮਿਲਾਉਣਾ

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

## ਭਵਿੱਖ ਬਾਰੇ ਇੱਕ ਨੋਟ: ਕੰਟੇਨਰ ਕਿਊਰੀਜ਼

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ **viewport** ਦੇ ਜਵਾਬ ਵਿੱਚ ਹਨ; ਨਵੀਰਤਮ **ਕੰਟੇਨਰ ਕਿਊਰੀਜ਼** (`@container`) ਇੱਕ *ਪੇਰੈਂਟ ਐਲੀਮਿੰਟ* ਦੇ ਸਾਈਜ਼ ਦੇ ਜਵਾਬ ਵਿੱਚ ਹਨ — ਸੱਚਮੁੱਚ ਦੁਬਾਰਾ ਵਰਤ ਸਕਣ ਯੋਗ ਕਾਂਪੋਨੈਂਟਸ ਲਈ ਬਿਹਤਰ। ਉਹ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨੂੰ ਬਦਲਣ ਦੀ ਬਜਾਏ ਪੂਰਕ ਕਰਦੇ ਹਨ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਜਵਾਬੀ ਡਿਜ਼ਾਈਨ ਦੀ ਨੀਂਦ ਹਨ — ਸਕ੍ਰੀਨ ਸਾਈਜ਼ ਲਈ ਲੇਆਊਟ, ਸਪੇਸਿੰਗ ਅਤੇ ਕਾਲਮਾਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣਾ।

ਮੋਬਾਈਲ-ਪਹਿਲੀ `min-width` ਪਹੁੰਚ CSS ਨੂੰ ਪ੍ਰਬੰਧਨ ਯੋਗ ਰੱਖਦੀ ਹੈ, ਅਤੇ ਤਰਜੀਹ ਕਿਊਰੀਜ਼ (`prefers-reduced-motion`, `prefers-color-scheme`) ਜਵਾਬੀ ਤਬਦੀਲੀ ਨੂੰ ਪਹੁੰਚ ਅਤੇ ਥੀਮਿੰਗ ਵਿੱਚ ਫੈਲਾਉਂਦੀਆਂ ਹਨ।