كيف تمكّن استعلامات الوسائط من التصميم المتجاوب؟

Question

Accepted Answer

**استعلامات الوسائط** تطبق CSS بشكل مشروط بناءً على خصائص الجهاز — غالباً **عرض viewport** — مما يسمح لورقة أنماط واحدة بالتكيف مع الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.

```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`) يُفضل عموماً: تكتب أنماطاً أساسية بسيطة للشاشات الصغيرة، ثم تضيف تدريجياً تعقيداً أكبر للشاشات الأكبر. هذا يميل إلى إنتاج 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`) توسع المرونة إلى إمكانية الوصول والمظهر.