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

استعلام وسائط CSS هو تقنية تتيح لك تطبيق أنماط مختلفة بناءً على خصائص الجهاز مثل حجم الشاشة، الدقة، الاتجاه، أو نظام الألوان. تُعد استعلامات الوسائط الأساس في التصميم المتجاوب، حيث تمكّن المواقع من تعديل تخطيطها ومظهرها عبر أجهزة مختلفة — من الهواتف الذكية إلى شاشات سطح المكتب. تستخدم استعلامات الوسائط قاعدة @media في CSS لتطبيق الأنماط شرطياً فقط عندما تتحقق شروط معينة.

وصف الأداة

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

الميزات

  • اختيار نوع الوسائط: اختر بين جميع الأنواع، أو screen، أو print، أو speech
  • ضوابط الأبعاد: عيّن الحد الأدنى والحد الأقصى للعرض/الارتفاع بأي وحدة CSS (px، em، rem، vw، إلخ)
  • ميزات الجهاز: اضبط الاتجاه، نسبة الأبعاد، الدقة، وتفضيلات نظام الألوان
  • شروط مخصصة: أضف أي ميزة وسائط مخصصة مثل قدرة الـhover أو نوع المؤشر
  • العوامل المنطقية: اجمع الشروط باستخدام عوامل AND، OR، أو NOT لإنشاء استعلامات مركبة
  • معاينة مباشرة: شاهد كود CSS المتولد يتحديث في الوقت الفعلي أثناء تعديل الإعدادات
  • مرجع نقاط الانقطاع الشائعة: وصول سريع إلى نقاط الانقطاع القياسية للهواتف، الأجهزة اللوحية، سطح المكتب، والميزات الخاصة

حالات الاستخدام

  • إنشاء تخطيطات متجاوبة تتكيف مع أحجام شاشات مختلفة
  • استهداف أجهزة محددة مثل الأجهزة اللوحية أو الهواتف الذكية
  • تنفيذ أنماط الوضع الداكن والوضع الفاتح
  • تحسين ملفات الأنماط للطباعة
  • اكتشاف الشاشات ذات الدقة العالية (retina)
  • تعديل التخطيطات بناءً على اتجاه الجهاز
  • بناء تصاميم متجاوبة بنهج mobile‑first أو desktop‑first
  • اختبار وتعلم صياغة استعلامات وسائط CSS