طريقة Window matchMedia()

التعريف والاستخدام

matchMedia() يستعيد الطريقة نتائج استعلام وسائط في MediaQueryList.

انظر أيضًا:

MediaQueryList

استعلام وسائط

يمكن أن تكون استعلامات وسائط matchMedia() أي خصائص وسائط من قواعد @media CSS، مثل min-height،min-width،orientation، إلخ.

مثال

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

مثال

مثال 1

هل عرض الشاشة/النافذة أكبر من 700 بكسل؟

if (window.matchMedia("(max-width: 700px)").matches) {
  // عرض الشاشة أقل أو يساوي 700 بكسل
}
  // عرض الشاشة أكبر من 700 بكسل
}

تجربة بنفسك

توضيح المثال

هذا المثال يعمل على استدعاء استعلام وسائط الوسائط ويقارنها بحالة النافذة الحالية.

لإجراء استجابة للوسائط التفاعلية عند تغيير حالة النافذة، أضف مستمع الحدث إلى MediaQueryList (انظر المثال أدناه "مزيد من الأمثلة"):

مثال 2

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

// إنشاء matchFunction
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // إنشاء MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// استدعاء matchFunction أثناء التشغيل:
myFunction(mmObj);
// إضافة matchFunction كمراقب للتغيرات في الحالة:
mmObj.addListener(myFunction);

تجربة بنفسك

النحو

window.matchMedia("mediaQuery)

الم 参数

الم 参数 الوصف
mediaQuery مطلوب. يمثل نص استعلام الإعلام.

القيمة المقدمة

النوع الوصف
الموضوع موضوع MediaQueryList يحتوي على نتائج الاستعلام الإعلامي.

دعم المتصفح

كل المتصفحات تدعم matchMedia()الخط السيني :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 11 الدعم الدعم الدعم الدعم