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

با استفاده از JavaScript معیار رسانه را استفاده کنید

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

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

مثال

اگر عرض ویجت کم از یا برابر 700 پیکسل باشد، رنگ پس‌زمینه را زرد می‌کنیم. اگر عرض بیشتر از 700 پیکسل باشد، آن را صورتی می‌کنیم:

function myFunction(x) {
  if (x.matches) { // اگر تحقیق رسانه‌ای باپایان می‌رسد
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryList عناصر ایجاد می‌کنیم
var x = window.matchMedia("(max-width: 700px)");
// شناساگر عملکرد را در حالت اجرا زمانی که برنامه در حال اجرا باشد، فراخوانی می‌کنیم
myFunction(x);
// در حالت تغییر، شناساگر عملکرد را ضمیمه می‌کنیم
x.addEventListener("change", function() {
  myFunction(x);
);

آپ خود بخوبی امتحان کریئن

مربوط پیج

آموزش:CSS 媒体查询

آموزش:ریسپانسیو ویب سائٹ ڈیزائن

مراجع دستورJavaScript window.matchMedia() میٹھد