Media Queries في CSS - دليل شامل لتصميم مواقع متجاوبة

Media Queries في CSS: اجعل موقعك متجاوباً مع جميع الأجهزة 📱💻

مرحباً بك في درس Media Queries! في عالم مليء بالأجهزة المختلفة، من الهواتف الذكية الصغيرة إلى الشاشات واسعة العرض، أصبح من الضروري أن يتكيف تصميم موقعك مع حجم الشاشة التي يعرض عليها. هذا بالضبط ما تفعله Media Queries (استعلامات الوسائط). فكر فيها كـ "شروط ذكية" في CSS تتحقق من خصائص الجهاز (مثل عرض الشاشة) وتطبق أنماط CSS مختلفة بناءً على تلك الشروط.

ما هي Media Queries؟ ولماذا نحتاجها؟ 🤔

Media Queries هي تقنية في CSS3 تسمح لك بتطبيق مجموعة من قواعد التنسيق فقط عندما يتم استيفاء شرط معين، مثل أن يكون عرض الشاشة أقل من 768 بكسل (مقاس الهاتف المحمول النموذجي).

لماذا هذا مهم؟ لأن التصميم الذي يبدو رائعاً على شاشة كمبيوتر محمول قد يصبح فوضويًا وغير قابل للقراءة على هاتف ذكي. Media Queries تحل هذه المشكلة، مما يسمح لك بإنشاء تصميم ويب متجاوب (Responsive Web Design) يقدم تجربة مستخدم مثالية بغض النظر عن الجهاز.

البنية الأساسية لـ Media Query 🏗️

الطريقة الأكثر شيوعاً لاستخدام Media Queries هي التحقق من عرض الشاشة (width). هيكلها الأساسي كالتالي:

@media (condition) {
  /* قواعد CSS التي ستطبق فقط إذا تحقق الشرط */
}

داخل الأقواس ( ) نضع الشرط. على سبيل المثال، (max-width: 768px) يعني "إذا كان عرض نافذة المتصفح 768 بكسل أو أقل".

أول Media Query لك: التكيف مع الهواتف المحمولة 📱

لنبدأ بمثال بسيط جداً. لنفترض أن لدينا عنصر <div> بخلفية زرقاء. نريد أن تتغير هذه الخلفية إلى اللون الأحمر عندما يتم عرض الموقع على هاتف محمول (عرض الشاشة 768px أو أقل).

الخطوة 1: النمط الأساسي (لجميع الشاشات)

.my-box {
  background-color: blue;
  padding: 20px;
  color: white;
}

الخطوة 2: إضافة Media Query للهواتف المحمولة نضيف الكود التالي في ملف الـ CSS الخاص بنا، ويفضل أن يكون في النهاية لتجنب مشاكل الأسبقية.

/* تطبيق هذا النمط عندما يكون عرض الشاشة 768px أو أقل */
@media (max-width: 768px) {
  .my-box {
    background-color: red; /* تغيير الخلفية إلى أحمر على الشاشات الصغيرة */
  }
}

النتيجة:

• على شاشة الكمبيوتر (عرض أكبر من 768px): سيكون .my-box أزرق اللون.
• على هاتف محمول (عرض 768px أو أقل): سيتحول .my-box تلقائياً إلى اللون الأحمر.

استخدام شروط متعددة: min-width و max-width 📏

يمكنك إنشاء نطاقات محددة لأحجام الشاشة باستخدام min-width (الحد الأدنى للعرض) و max-width (الحد الأقصى للعرض).

• (min-width: 768px): "إذا كان العرض 768 بكسل أو أكبر".
• (max-width: 1024px): "إذا كان العرض 1024 بكسل أو أقل".

مثال: تحديد أنماط لثلاثة أجهزة مختلفة

/* النمط الأساسي (لشاشات كبيرة، كمبيوتر مكتبي) */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* للشاشات المتوسطة مثل الألواح الإلكترونية (Tablets) */
@media (max-width: 1024px) {
  .container {
    width: 90%; /* استخدم النسبة المئوية لملء العرض بشكل أفضل */
  }
}

/* للهواتف المحمولة (Phones) */
@media (max-width: 768px) {
  .container {
    width: 100%; /* شغل العرض بالكامل */
    padding: 10px;
  }
}

في هذا المثال، سيتكيف عرض الحاوية .container بشكل مثالي مع حجم الجهاز.

نقاط التوقف الشائعة (Common Breakpoints) 🎯

"نقطة التوقف (Breakpoint)" هي قيمة العرض التي تقرر عندها تغيير التصميم باستخدام Media Query. بينما تختلف الأحجام بين الأجهزة، هناك نقاط توقف قياسية يتبعها معظم المطورين:

• الهواتف المحمولة: (max-width: 768px)
• الألواح الإلكترونية (Tablets) والهواتف الكبيرة: (min-width: 769px) and (max-width: 1024px)
• أجهزة الكمبيوتر المحمولة والصغيرة: (min-width: 1025px) and (max-width: 1200px)
• شاشات الكمبيوتر المكتبية الكبيرة والأجهزة ذات الدقة العالية: (min-width: 1201px)

مثال عملي: إخفاء عنصر في الهاتف المحمول قد يكون لديك عنصر جانبي (sidebar) تريد إخفاءه على الهواتف لتوفير مساحة.

.sidebar {
  display: block; /* ظاهر بشكل افتراضي */
}

@media (max-width: 768px) {
  .sidebar {
    display: none; /* إخفاء الشريط الجانبي على الهواتف */
  }
}

خطة عمل لإنشاء موقع متجاوب 🗺️

1. ابدأ دائمًا بالتصميم للجوّال أولاً (Mobile-First)
2. أضف Media Queries: في نهاية ملف CSS الخاص بك، ابدأ بإضافة استعلامات الوسائط باستخدام min-width، من الأصغر إلى الأكبر.
3. اختبر تصميمك: استخدم أدوات المطورين في المتصفح (اضغط F12) لتغيير حجم نافذة المتصفح ومحاكاة أجهزة مختلفة.

ماذا سنتعلم في الدرس القادم؟ 🔮

الآن وقد أصبحت تعرف كيفية جعل موقعك متجاوباً مع مختلف أحجام الشاشات، حان الوقت لنتعلم كيفية تحسين تخطيط الصفحة بشكل أكبر! في الدرس القادم، سنتعمق في CSS Flexbox. Flexbox هي تقنية تخطيط قوية جداً تجعل من السهل جداً توزيع العناصر وتوسيطها وإنشاء تصميمات مرنة ومعقدة بطريقة بديهية. ستساعدك Flexbox على بناء مكونات مثل قوائم التنقل والبطاقات (Cards) وتخطيطات الصفحة الكاملة بسهولة وسلاسة. استعد لاكتشاف قوة المرونة في التصميم!