CSS - Media Queries استعلامات الوسائط

CSS - استعلامات الوسائط (Media Queries)

🔸 تُستخدم Media Queries في CSS لإنشاء تصميمات متجاوبة (Responsive) تتكيف مع حجم الشاشة، نوع الجهاز، أو خصائص أخرى مثل الاتجاه أو الدقة.

🔹 الصيغة العامة لـ Media Query

@media media-type and (condition) {
  /* CSS Code */
}

📌 يمكن تطبيق أنماط مختلفة حسب الشروط مثل عرض الشاشة، الارتفاع، الاتجاه، وغير ذلك.

🧪 مثال: تغيير لون الخلفية على الشاشات الصغيرة

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

📌 هذا الكود يُغير لون الخلفية إذا كان عرض الشاشة 600px أو أقل.

---

🔹 أنواع الشاشات (Media Types)

• all: ينطبق على جميع الأجهزة (افتراضي).
• screen: شاشات مثل الكمبيوتر أو الهاتف.
• print: للطباعة.
• speech: لأجهزة تحويل النص إلى صوت.

---

🔹 خصائص Media Features شائعة

• max-width: أقصى عرض للشاشة.
• min-width: الحد الأدنى لعرض الشاشة.
• orientation: اتجاه الشاشة (أفقي أو عمودي).
• max-height و min-height: للتحكم حسب ارتفاع الشاشة.

---

🧪 مثال: اتجاه الشاشة (عمودي)

@media screen and (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

📌 يتم تطبيق النمط فقط عندما تكون الشاشة في الوضع العمودي.

---

🧪 مثال: تصميم متجاوب متعدد النقاط

/* شاشة كبيرة */
@media screen and (min-width: 992px) {
  body {
    background-color: white;
  }
}

/* شاشة متوسطة */
@media screen and (min-width: 768px) and (max-width: 991px) {
  body {
    background-color: lightgray;
  }
}

/* شاشة صغيرة */
@media screen and (max-width: 767px) {
  body {
    background-color: lightyellow;
  }
}

---

📌 ملاحظات هامة

• يفضل كتابة Media Queries في نهاية ملف CSS أو في ملفات منفصلة.
• يمكن استخدام أكثر من شرط في Media Query باستخدام and أو ,.
• تُستخدم بشكل أساسي في التصميم المتجاوب (Responsive Design).