کورس سجد

بندوق

کدوو3سی کام ڈاک بکسی

میوز

تصویر

بٹن

فرم

ترتیب فیلڈ

تیبل

بھی

شبکه

مبدل

درس اختیاری

پیشنهاد دوره:

کدوو3سی کام ڈاک بکسی

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

صفحه قبل متحرک HTML عناصر
صفحه بعدی برچسب کد جلوه

استفاده از JavaScript برای Media Query

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

window.matchMedia() این روش یک MediaQueryList object برمی‌گرداند که نشان‌دهنده نتایج CSS mediacss query string مشخص شده است.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 object ایجاد می‌شود
var x = window.matchMedia("(max-width: 700px)");
// listener function در زمان اجرا فراخوانی می‌شود
myFunction(x);
// در حالت تغییر به listener function متصل می‌شود
x.addEventListener("change", function() {
  myFunction(x);
);

به طور مستقیم امتحان کنید