میڈیا کیوریز کس طرح responsive design کو ممکن بناتے ہیں؟

Question

Accepted Answer

**Media queries** ڈیوائس کی خصوصیات — سب سے زیادہ **viewport width** — کی بنیاد پر CSS کو مشروط طور پر لاگو کرتے ہیں، ایک ہی stylesheet کو phones، tablets، اور desktops کے لیے موافق بناتے ہیں۔

```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) بمقابلہ 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`) عام طور پر بہتر ہے: آپ چھوٹی screens کے لیے سادہ base styles لکھتے ہیں، پھر بڑی screens کے لیے تدریجی طور پر پیچیدگی شامل کرتے ہیں۔ یہ عام طور پر صاف، ہلکا CSS تیار کرتا ہے اور اس طریقے سے مماثل ہے جس طرح مواد دوبارہ بہتی ہے۔

## دیگر مفید queries

```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` صارف کی *ترجیحات* کے جواب میں کام کرتے ہیں، screen size کی نہیں — رسائی اور theming کے لیے اہم ہے۔

## شرائط کو ملانا

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

## مستقبل کے بارے میں ایک نوٹ: container queries

Media queries **viewport** کے جواب میں کام کرتے ہیں؛ نیا **container queries** (`@container`) ایک *parent element کے* سائز کے جواب میں کام کرتا ہے — واقعی دوبارہ استعمال ہونے والے components کے لیے بہتر۔ یہ media queries کی جگہ لیتے ہیں بجائے ان کی تبدیلی کے۔

## یہ کیوں اہم ہے

Media queries responsive design کی بنیاد ہیں — layout، spacing، اور columns کو screen size کے مطابق ڈھالنا۔

Mobile-first `min-width` approach CSS کو منظم رکھتا ہے، اور preference queries (`prefers-reduced-motion`، `prefers-color-scheme`) responsiveness کو رسائی اور theming تک بڑھاتے ہیں۔