چگونه از پرسش رسانه‌ای با استفاده از JavaScript استفاده کنیم

استفاده از پرسش رسانه‌ای با استفاده از JavaScript

پرسش رسانه‌ای در CSS3 معرفی شده است و یکی از عناصر کلیدی طراحی وب واکنش‌گرا است. پرسش رسانه‌ای برای تعیین عرض و ارتفاع视‌وگاه استفاده می‌شود تا وب‌سایت‌ها در همه دستگاه‌ها (کامپیوترهای رومیزی، لپ‌تاپ، تبلت، تلفن‌های موبایل و غیره) به خوبی نمایش داده شوند.

window.matchMedia() این روش یک MediaQueryList را برمی‌گرداند، که نشان‌دهنده نتایج رشته پرسش رسانه‌ای CSS مشخص شده است.matchMedia() مقدار این روش می‌تواند CSS @media هر یک از ویژگی‌های رسانه‌ای قوانین، به عنوان مثال min-heightوmin-widthوجهت و غیره.

مثال

اگر عرض视‌وگاه کمتر یا برابر با 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

آموزش:طراحی وب واکنش‌گرا

دستورالعمل مرجع:مетод window.matchMedia() در JavaScript