**@media queries** هي الأداة الرئيسية لتصميم متجاوب — تُطبّق CSS مختلفة بناءً على خصائص الجهاز أو النافذة.
**الصياغة الأساسية:** ```css @media (condition) { /* CSS */ } @media type (condition) { /* CSS */ } ```
**نوع الوسيط:** - `screen` — شاشات - `print` — طباعة - `all` — الكل (الافتراضي)
**الشروط الأكثر استخداماً:** - `min-width` — عرض أكبر من أو يساوي (Mobile First) - `max-width` — عرض أصغر من أو يساوي (Desktop First) - `orientation: portrait` — الجهاز رأسي - `orientation: landscape` — الجهاز أفقي
**نقاط الكسر الشائعة:** - 640px — sm - 768px — md - 1024px — lg - 1280px — xl - 1536px — 2xl
**Mobile First (الأفضل):** ابدأ بأنماط الموبايل، ثم أضف أنماط أكبر عبر min-width.
| 1 | /* Mobile First */ |
| 2 | .grid { grid-template-columns: 1fr; } |
| 3 | |
| 4 | @media (min-width: 640px) { |
| 5 | .grid { grid-template-columns: repeat(2, 1fr); } |
| 6 | } |
| 7 | |
| 8 | @media (min-width: 1024px) { |
| 9 | .grid { grid-template-columns: repeat(3, 1fr); } |
| 10 | } |
مثال 1: نظام نقاط كسر كمتغيرات
| 1 | /* لا يمكن استخدام CSS variables في @media ؛ استخدم تعليقات للتوثيق */ |
| 2 | /* --breakpoint-sm: 640px */ |
| 3 | /* --breakpoint-md: 768px */ |
| 4 | /* --breakpoint-lg: 1024px */ |
| 5 | /* --breakpoint-xl: 1280px */ |
| 6 | |
| 7 | /* Mobile First Layout */ |
| 8 | .page-layout { |
| 9 | display: grid; |
| 10 | grid-template-columns: 1fr; |
| 11 | grid-template-areas: |
| 12 | "header" |
| 13 | "main" |
| 14 | "sidebar" |
| 15 | "footer"; |
| 16 | } |
| 17 | |
| 18 | @media (min-width: 768px) { |
| 19 | .page-layout { |
| 20 | grid-template-columns: 240px 1fr; |
| 21 | grid-template-areas: |
| 22 | "header header" |
| 23 | "sidebar main" |
| 24 | "footer footer"; |
| 25 | } |
| 26 | } |
| 27 | |
| 28 | @media (min-width: 1280px) { |
| 29 | .page-layout { |
| 30 | grid-template-columns: 280px 1fr 200px; |
| 31 | grid-template-areas: |
| 32 | "header header header" |
| 33 | "sidebar main aside" |
| 34 | "footer footer footer"; |
| 35 | } |
| 36 | } |