كيفية استخدام الاستعلامات الوسائطية ببرنامج JavaScript

استخدام الاستعلامات الوسائطية ببرنامج JavaScript

تم إدخال الاستعلامات الوسائطية في CSS3 كأحد العناصر الأساسية لتصميم الويب التفاعلي. تستخدم الاستعلامات الوسائطية لتحديد عرض ونطاق النافذة، لضمان عرض صفحة الويب بشكل جيد على جميع الأجهزة (الحواسيب المكتبية، أجهزة الكمبيوتر المحمولة، الأجهزة اللوحية، الهواتف الذكية، إلخ).

window.matchMedia() يستعيد هذه الطريقة MediaQueryList عنصرًا يمثل نتيجة استعلام CSS الوسائطي المحدد.matchMedia() يمكن أن يكون قيمة هذه الطريقة CSS @media أي خصائص وسائط معينة، مثل أقل طول،أقل عرض،اتجاه ، إلخ.

مثال

إذا كان عرض النافذة أقل أو يساوي 700 بكسل، قم بتغيير لون الخلفية إلى أصفر. وإذا كان عرض النافذة أكبر من 700 بكسل، قم بتغييره إلى ورد:

function myFunction(x) {
  if (x.matches) { // إذا تطابقت الاستعلامات الوسائطية
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// إنشاء MediaQueryList
var x = window.matchMedia("(max-width: 700px)");
// استدعاء وظيفة الاستماع عند التشغيل
myFunction(x);
// إضافة وظيفة الاستماع عند تغيير الحالة
x.addEventListener("change", function() {
  myFunction(x);
);

جربها بنفسك

الصفحات ذات الصلة

دليل التعليمات:استعلامات الوسائط CSS

دليل التعليمات:تصميم صفحات الويب التفاعلية

دليل المراجعة:طريقة JavaScript window.matchMedia()