الوسائط - media queries

ما هي استعلامات الوسائط؟

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

الخطوات العملية لكتابة استعلامات الوسائط:

• حدد نوع الوسائط الذي تريد استهدافه، مثل الشاشة والطباعة.
• حدد الخاصية التي تريد الاستعلام عنها، مثل حجم الشاشة أو الاتجاه.
• استخدم مشغل مناسب للمقارنة، مثل >= أو <= أو =.
• ضع قيمة للمقارنة معها.
• أضف مجموعة من قواعد CSS داخل نطاق الاستعلام.

أمثلة على أنواع استعلامات الوسائط:

• استعلام حجم الشاشة: media (min-width: 768px)@
• استعلام اتجاه الشاشة: media (orientation: landscape)@
• استعلام نوع الوسائط: media (print)@
• استعلام الدقة: media (max-resolution: 192dpi)@

مثال CSS الذي يوضح تكييف الأنماط لأحجام الشاشات المختلفة:

/* أنماط لأجهزة الكمبيوتر المكتبية والشاشات الكبيرة */
@media (min-width: 1024px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* أنماط لأجهزة الكمبيوتر المحمولة والشاشات المتوسطة */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* أنماط للهواتف الذكية والشاشات الصغيرة */
@media (max-width: 767px) {
  body {
    font-size: 12px;
    line-height: 1.3;
  }
}

نصائح إضافية:

• استخدم استعلامات الوسائط بحكمة، وتجنب الإفراط في استخدامها.
• اختبر موقعك على أجهزة وأحجام شاشات مختلفة للتأكد من أنه يعرض بشكل صحيح.
• يمكنك الجمع بين استعلامات الوسائط لإنشاء قواعد أكثر تحديدًا.