كيف - استعلامات الوسائط بجافا سكريبت
مثال
إذا كان حجم إطار العرض أقل من 700 بكسل أو يساوي عرضه ، فقم بتغيير لون الخلفية إلى اللون الأصفر. إذا كان أكبر من 700 ، قم بتغييره إلى اللون الوردي
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
استخدام استعلامات الوسائط بجافا سكريبت
تم تقديم استعلامات الوسائط في CSS3 ، وهي أحد المكونات الرئيسية لتصميم الويب سريع الاستجابة. تُستخدم استعلامات الوسائط لتحديد عرض وارتفاع إطار العرض لجعل صفحات الويب تبدو جيدة على جميع الأجهزة (أجهزة الكمبيوتر المكتبية ، وأجهزة الكمبيوتر المحمولة ، والأجهزة اللوحية ، والهواتف ، وما إلى ذلك).
تقوم طريقة window.matchMedia () بإرجاع كائن MediaQueryList الذي يمثل نتائج سلسلة استعلام وسائط CSS المحددة. يمكن أن تكون قيمة طريقة matchMedia () أيًا من ميزات الوسائط الخاصة بقاعدة CSSmedia ، مثل min-height ، و min-width ، و direction ، وما إلى ذلك.
تعرف على المزيد حول استعلامات الوسائط في البرنامج التعليمي الخاص باستعلامات وسائط CSS
تعرف على المزيد حول التصميم سريع الاستجابة في برنامجنا التعليمي لتصميم الويب سريع الاستجابة
تعرف على المزيد حول طريقة window.matchMedia () في مرجع JavaScript الخاص بنا.