JavaScript 对象

JavaScript 参考手册

JS DOM参考手册

مثلث التخزين JS مثلث النافذة جافا سكريبت

Window matchMedia() 方法

مثلث النافذة جافا سكريبت

matchMedia()方法返回一个新的MediaQueryList对象，该对象表示指定媒体查询字符串的解析结果。

matchMedia()方法的值可以是CSS @media规则的任何媒体功能，例如min-height，min-width，orientation等。

语法：

مثال

if (window.matchMedia("(min-width: 500px)
　　　/* عرض نافذة التصفح الأدنى هو 500 بكسل */
} else {
　　　/* عرض نافذة التصفح أقل من 500 بكسل */
}

اختبار النظر في‹/›

توافق المتصفحات

الرقم في الجدول في الصف يحدد إصدار المتصفح الأول الذي يدعم طريقة matchMedia() بشكل كامل:

الطريقة
matchMedia()	9	6	12.1	5.1	10

قيمة المعامل

المعامل	وصف
mediaQueryString	نوع من النصوص يمثل الإعلام الذي سيتم العثور عليه على MediaQueryList الجديدة

تفاصيل التقنية

النتيجة:	مثلث قائمة وسائل الإعلام، يمثل النتيجة لاستعلام وسائل الإعلام CSS المحدد

مزيد من الأمثلة

إذا كان عرض النافذة أقل أو يساوي 600 بكسل، فإن لون الخلفية سيكون لون الكورال. وإذا كان أكبر من 600، سيكون لون الخلفية شفافًا أخضر فاتح:

مثال

var size = window.matchMedia("(max-width: 600px)"}
myFunc(size) // استدعاء وظيفة الاستماع عند التشغيل
size.addListener(myFunc) // إضافة وظيفة الاستماع عند تغيير الحالة
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　} else {
　document.body.style.backgroundColor = "lightgreen";
　　}
}

اختبار النظر في‹/›

مراجع ذات صلة

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

مثلث النافذة جافا سكريبت

مثلث التخزين JS مثلث النافذة جافا سكريبت