طريقة Window matchMedia()
- الصفحة السابقة location
- الصفحة التالية moveBy()
- العودة إلى الطبقة السابقة مثل Window
التعريف والاستخدام
matchMedia()
يستعيد الطريقة نتائج استعلام وسائط في 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 | الدعم | الدعم | الدعم | الدعم |
- الصفحة السابقة location
- الصفحة التالية moveBy()
- العودة إلى الطبقة السابقة مثل Window