دليل شامل لاستخدام استعلامات الوسائط في JavaScript

تستخدم معظم مواقع الويب الحديثة تقنيات تصميم الويب المتجاوبة للتأكد من أنها تبدو جيدة وقابلة للقراءة وتظل قابلة للاستخدام على الأجهزة بأي حجم شاشة ، مثل الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وشاشات الكمبيوتر المكتبي وأجهزة التلفزيون وأجهزة العرض والمزيد.

تحتوي المواقع التي تستخدم هذه الأساليب على نموذج واحد يعدل التنسيق استجابة لأبعاد الشاشة:

عادةً ما تُظهر الشاشات الأصغر حجمًا عرضًا خطيًا أحادي العمود حيث يتم تنشيط عناصر تحكم واجهة المستخدم مثل القوائم بالنقر فوق رموز (الهامبرغر).

تعرض الشاشات الأكبر حجمًا مزيدًا من المعلومات ، ربما باستخدام أشرطة جانبية محاذية أفقيًا. قد تكون عناصر التحكم في واجهة المستخدم مثل عناصر القائمة مرئية دائمًا لتسهيل الوصول إليها.

جزء كبير من تصميم الويب سريع الاستجابة هو تنفيذ استعلام وسائط CSS أو JavaScript لاكتشاف حجم الجهاز وتقديم التصميم المناسب لهذا الحجم تلقائيًا. سنناقش سبب أهمية هذه الاستعلامات وكيفية التعامل معها ، ولكن أولاً ، دعنا نناقش التصميم سريع الاستجابة بشكل عام.

لماذا يعتبر التصميم سريع الاستجابة مهمًا؟

من المستحيل توفير تخطيط صفحة واحدة وتوقع أن يعمل في كل مكان.

عندما حصلت الهواتف المحمولة على وصول بدائي إلى الويب لأول مرة في أوائل العقد الأول من القرن الحادي والعشرين ، كان مالكو المواقع غالبًا ما ينشئون نموذجين أو ثلاثة قوالب منفصلة للصفحة تستند إلى طرق عرض الأجهزة المحمولة وسطح المكتب. أصبح ذلك غير عملي بشكل متزايد مع نمو تنوع الأجهزة بشكل كبير.

اليوم ، هناك العديد من أحجام الشاشات التي تتراوح من شاشات ساعات اليد الصغيرة إلى شاشات 8K الضخمة وما بعدها. حتى إذا كنت تفكر فقط في الهواتف المحمولة ، يمكن أن تتمتع الأجهزة الحديثة بدقة أعلى من العديد من أجهزة الكمبيوتر المحمولة منخفضة الجودة.

كما نما استخدام الأجهزة المحمولة إلى ما هو أبعد من استخدام أجهزة الكمبيوتر المكتبية . ما لم يكن موقعك يحتوي على مجموعة محددة من المستخدمين ، يمكنك توقع وصول غالبية الأشخاص إليه من هاتف ذكي. لم تعد الأجهزة ذات الشاشات الصغيرة فكرة متأخرة ويجب أخذها في الاعتبار منذ البداية ، على الرغم من استمرار معظم مصممي الويب والمطورين والعملاء في استخدام جهاز كمبيوتر قياسي.

لقد أدركت Google أهمية الأجهزة المحمولة. تحصل المواقع على ترتيب أفضل في بحث Google عندما تكون قابلة للاستخدام وتحقق أداءً جيدًا على الهاتف الذكي. يظل المحتوى الجيد أمرًا حيويًا ، ولكن موقع التحميل البطيء الذي يفشل في التكيف مع أبعاد الشاشة لقاعدة المستخدم الخاصة بك يمكن أن يضر بعملك.

أخيرًا ، ضع في اعتبارك إمكانية الوصول. سيصل الموقع الذي يناسب الجميع ، بغض النظر عن الجهاز الذي يستخدمونه ، إلى جمهور أكبر. تُعد إمكانية الوصول مطلبًا قانونيًا في العديد من البلدان ، ولكن حتى إذا لم تكن في مكانك الحالي ، فضع في اعتبارك أن المزيد من المشاهدين سيؤدي إلى مزيد من التحويلات وربحية أعلى.

كيف يعمل التصميم المستجيب؟

أساس التصميم سريع الاستجابة هو استعلامات الوسائط : تقنية CSS يمكنها تطبيق الأنماط وفقًا لمقاييس مثل نوع الإخراج (الشاشة أو الطابعة أو حتى الكلام) وأبعاد الشاشة ونسبة العرض إلى الارتفاع واتجاه الجهاز وعمق اللون ودقة المؤشر . يمكن أن تأخذ استعلامات الوسائط أيضًا تفضيلات المستخدم في الاعتبار ، بما في ذلك الرسوم المتحركة المخفضة والوضع الفاتح / الداكن والتباين العالي.

توضح الأمثلة التي أظهرناها استعلامات الوسائط باستخدام عرض الشاشة فقط ، ولكن يمكن أن تكون المواقع أكثر مرونة إلى حد كبير. راجع مجموعة الخيارات الكاملة على MDN للحصول على التفاصيل.

يعد دعم الاستعلام عن الوسائط ممتازًا وكان موجودًا في المتصفحات لأكثر من عقد من الزمان. فقط IE8 وأدناه ليس لديهم دعم. يتجاهلون الأنماط المطبقة بواسطة استعلامات الوسائط ، ولكن قد يكون ذلك مفيدًا في بعض الأحيان (اقرأ المزيد في قسم أفضل الممارسات أدناه).

هناك ثلاث طرق قياسية لتطبيق الأنماط باستخدام استعلامات الوسائط. يقوم الأول بتحميل أوراق أنماط محددة في كود HTML . على سبيل المثال ، تقوم العلامة التالية بتحميل ورقة الأنماط wide.css عندما يكون للجهاز شاشة لا يقل عرضها عن 800 بكسل:

<link rel="stylesheet" media="screen and (min-width: 800px)" href="wide.css" />

ثانيًا ، يمكن تحميل أوراق الأنماط بشكل مشروط في ملفات CSS باستخدام قاعدة @importat:

/* main.css */
@import url('wide.css') screen and (min-width: 800px);

معلومات

لاحظ أنه @importيجب تجنب ذلك لأن كل ملف CSS تم استيراده يحظر العرض. <link>يتم تنزيل علامات HTML بالتوازي ، بينما يتم @importتنزيل الملفات على التوالي.

بشكل نموذجي ، ستقوم بتطبيق استعلامات الوسائط في أوراق الأنماط باستخدامmedia CSS at-rule block الذي يعدل أنماطًا معينة. على سبيل المثال:

/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
}

يمكن للمطورين تطبيق أي قواعد استعلام عن الوسائط ضرورية لتكييف تخطيط الموقع.

أفضل ممارسات الاستعلام عن الوسائط

عندما تم تصميم استعلامات الوسائط لأول مرة ، اختارت العديد من المواقع مجموعة من التخطيطات الثابتة بشكل صارم. هذا أسهل من الناحية المفاهيمية في التصميم والتعليمات البرمجية لأنه يكرر بشكل فعال مجموعة محدودة من قوالب الصفحات. على سبيل المثال:

تستخدم عروض الشاشة الأقل من 600 بكسل تنسيقًا مشابهًا للجوال بعرض 400 بكسل.

عرض الشاشة بين 600 بكسل و 999 بكسل يستخدم تنسيقًا شبيهًا باللوح بعرض 600 بكسل.

تستخدم عروض الشاشة الأكبر من 1000 بكسل تنسيقًا شبيهًا بسطح المكتب بعرض 1000 بكسل.

هذه التقنية معيبة. قد تبدو النتائج على الشاشات الصغيرة جدًا والكبيرة جدًا سيئة ، ويمكن أن تكون هناك حاجة إلى صيانة CSS حيث تتغير الأجهزة وأحجام الشاشة بمرور الوقت.

الخيار الأفضل هو استخدام تصميم انسيابي للجوّال مع نقاط توقف تتكيف مع التخطيط بأحجام معينة. في الأساس ، يستخدم التخطيط الافتراضي أبسط أنماط الشاشة الصغيرة التي تضع العناصر في كتل عمودية خطية.

على سبيل المثال، <article>و <aside>داخل <main>الحاوية:

/* default small-screen device */
main {
  width: 100%;
}

article, aside {
  width: 100%;
  padding: 2em;
}

إليك النتيجة في جميع المتصفحات – حتى القديمة جدًا التي لا تدعم استعلامات الوسائط:

مثال لقطة شاشة بدون دعم الاستعلام عن الوسائط.

مثال لقطة شاشة بدون دعم الاستعلام عن الوسائط.

عندما يتم دعم استعلامات الوسائط وتتجاوز الشاشة عرضًا معينًا ، على سبيل المثال 500 بكسل ، يمكن وضع العناصر <article>و <aside>أفقياً. يستخدم هذا المثال شبكة CSS ، حيث يستخدم المحتوى الأساسي ما يقرب من ثلثي العرض ، ويستخدم المحتوى الثانوي الثلث المتبقي:

/* larger device */
@media (min-width: 500px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2em;
  }

  article, aside {
    width: auto;
    padding: 0;
  }
}

ها هي النتيجة على الشاشات الأكبر حجمًا:

مثال على لقطة شاشة مع دعم استعلام وسائط جافا سكريبت

مثال لقطة شاشة مع دعم الاستعلام عن الوسائط.

بدائل استعلام الوسائط

يمكن أيضًا تنفيذ التصميمات المتجاوبة في CSS الحديثة باستخدام خصائص أحدث تتكيف جوهريًا مع التخطيط دون فحص أبعاد منفذ العرض. تشمل الخيارات:

calc، min-width، max-width، min-height، max-height، وأحدث clampالملكية يمكن تحديد جميع الأبعاد أن عناصر حجم وفقا لحدود المعروف والمساحة المتاحة.

يمكن لوحدات منفذ العرض vw، vh، vmin، و ، تغيير vmaxحجم العناصر وفقًا لكسور أبعاد الشاشة.

يمكن عرض النص في أعمدة CSS التي تظهر أو تختفي حسب المساحة المسموح بها.

يمكن أن يكون الحجم العناصر وفقا لأحجام عنصر أطفالهم باستخدام min-content، fit-contentو max-contentأبعاد.

يمكن لـ CSS flexbox أن يلتف – أو لا يلتف – العناصر عندما تبدأ في تجاوز المساحة المتاحة.

يمكن تغيير حجم عناصر شبكة CSS frبوحدات كسور متناسبة . وظيفة تكرار CSS يمكن استخدامها جنبا إلى جنب مع minmax، auto-fitو auto-fillتخصيص الحيز المتاح.

يمكن أن تتفاعل استعلامات حاوية CSS الجديدة والتجريبية (حاليًا) مع المساحة الجزئية المتاحة لمكون داخل تخطيط.

تقع هذه الخيارات خارج نطاق هذه المقالة ، ولكنها غالبًا ما تكون أكثر عملية من استعلامات الوسائط الفظة ، والتي يمكنها الاستجابة فقط لأبعاد الشاشة. إذا كان بإمكانك تحقيق تخطيط بدون استعلامات الوسائط ، فمن المحتمل أن يستخدم رمزًا أقل ويكون أكثر كفاءة ويتطلب صيانة أقل بمرور الوقت.

ومع ذلك ، هناك حالات تظل فيها استعلامات الوسائط هي خيار التخطيط الوحيد القابل للتطبيق. تظل ضرورية عندما تحتاج إلى مراعاة عوامل الشاشة الأخرى مثل نسب العرض إلى الارتفاع أو اتجاه الجهاز أو عمق اللون أو دقة المؤشر أو تفضيلات المستخدم مثل الرسوم المتحركة المخفضة والوضع الفاتح / الداكن.

هل تحتاج إلى استعلامات وسائط بجافا سكريبت؟

لقد تحدثنا في الغالب عن CSS حتى الآن. وذلك لأن معظم مشكلات التخطيط يمكن – ويجب – حلها في CSS وحدها.

ومع ذلك ، هناك مواقف يكون فيها استخدام استعلام وسائط JavaScript بدلاً من CSS عمليًا ، مثل عندما:

يحتوي أحد المكونات ، مثل القائمة ، على وظائف مختلفة على الشاشات الصغيرة والكبيرة.

يؤثر التبديل من وإلى الوضع الرأسي / الأفقي على وظائف تطبيق الويب.

يجب على اللعبة التي تعمل باللمس تغيير <canvas>التخطيط أو تكييف أزرار التحكم.

يلتزم تطبيق الويب بتفضيلات المستخدم مثل الوضع الداكن / الفاتح ، والرسوم المتحركة المخفضة ، وخشونة اللمس ، وما إلى ذلك.

توضح الأقسام التالية ثلاث طرق تستخدم استعلامات الوسائط – أو خيارات تشبه استعلام الوسائط – في JavaScript . جميع الأمثلة ترجع سلسلة حالة حيث:

عرض صغير = شاشة بعرض أقل من 400 بكسل ؛

عرض متوسط = شاشة بعرض يتراوح بين 400 و 799 بكسل ؛ و

عرض كبير = شاشة بعرض 800 بكسل أو أكثر.

الخيار 1: مراقبة أبعاد منفذ العرض

كان هذا هو الخيار الوحيد في الأيام المظلمة قبل تنفيذ الاستعلامات الإعلامية. أن جافا سكريبت الاستماع لمتصفح أحداث “تغيير الحجم”، وتحليل أبعاد العرض باستخدام window.innerWidthو window.innerHeight(أو document.body.clientWidthو document.body.clientHeightفي الكيانات المستقلة القديمة)، والرد وفقا لذلك.

يُخرج هذا الرمز السلسلة المحسوبة الصغيرة أو المتوسطة أو الكبيرة إلى وحدة التحكم:

const
  screen = {
    small: 0,
    medium: 400,
    large: 800
  };

// observe window resize
window.addEventListener('resize', resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

  // get window width
  const iw = window.innerWidth;
 
  // determine named size
  let size = null;
  for (let s in screen) {
    if (iw >= screen[s]) size = s;
  }

  console.log(size);
}

يمكنك مشاهدة عرض عملي هنا . (في حالة استخدام مستعرض سطح المكتب ، افتح هذا الرابط في نافذة جديدة لتسهيل تغيير الحجم. يمكن لمستخدمي الجوال تدوير الجهاز.)

يفحص المثال أعلاه حجم منفذ العرض أثناء تغيير حجم المتصفح ؛ يحدد ما إذا كان صغيرًا أم متوسطًا أم كبيرًا ؛ ويضع ذلك كفئة على عنصر الجسم ، مما يغير لون الخلفية.

تشمل مزايا هذه الطريقة ما يلي:

إنه يعمل في كل متصفح يمكنه تشغيل JavaScript – حتى التطبيقات القديمة.

أنت تلتقط الأبعاد الدقيقة ويمكن أن تتفاعل وفقًا لذلك.

العيوب:

إنها تقنية قديمة تتطلب كودًا كبيرًا.

هل هو دقيق جدا؟ هل تحتاج حقًا إلى معرفة متى يكون العرض 966 بكسل مقابل 967 بكسل؟

قد تحتاج إلى مطابقة الأبعاد يدويًا لاستعلام وسائط CSS مطابق.

يمكن للمستخدمين تغيير حجم المتصفح بسرعة ، مما يؤدي إلى تشغيل وظيفة المعالج مرة أخرى في كل مرة. يمكن أن يؤدي هذا إلى زيادة التحميل على المتصفحات الأقدم والأبطأ من خلال تقييد الحدث. يمكن تشغيله مرة واحدة فقط كل 500 مللي ثانية.

باختصار ، لا تراقب أبعاد منفذ العرض ما لم تكن لديك متطلبات تحجيم محددة ومعقدة للغاية.

الخيار 2: تحديد خاصية CSS المخصصة (متغير) ومراقبتها

هذا أسلوب غير معتاد إلى حد ما يغير قيمة سلسلة الخاصية المخصصة في CSS عند تشغيل استعلام وسائط. الخصائص المخصصة مدعومة في جميع المتصفحات الحديثة (لكن ليس IE).

في المثال أدناه ، –screen custom propertyتم تعيين الحرف على “صغير” أو “متوسط” أو “كبير” داخل كتلة التعليمات البرمجيةmedia:

body {
  --screen: "small";
  background-color: #cff;
  text-align: center;
}

@media (min-width: 400px) {
 
  body {
    --screen: "medium";
    background-color: #fcf;
  }
 
}

@media (min-width: 800px) {
 
  body {
    --screen: "large";
    background-color: #ffc;
  }
 
}

يمكن إخراج القيمة في CSS بمفردها باستخدام عنصر زائف (لكن لاحظ أنه يجب تضمينها ضمن علامات اقتباس مفردة أو مزدوجة):

p::before {
  content: var(--screen);
}

يمكنك جلب قيمة الخاصية المخصصة باستخدام JavaScript:

const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen');

هذه ليست القصة بأكملها ، على الرغم من ذلك ، لأن القيمة التي تم إرجاعها تحتوي على كل المسافات البيضاء وأحرف الاقتباس المحددة بعد النقطتين في CSS. ستكون السلسلة “كبيرة” ، لذا من الضروري إجراء القليل من الترتيب:

// returns small, medium, or large in a string
const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen')
                 .replace(/\W/g, '');

يمكنك مشاهدة عرض عملي هنا . (في حالة استخدام مستعرض سطح المكتب ، افتح هذا الرابط في نافذة جديدة لتسهيل تغيير الحجم. يمكن لمستخدمي الجوال تدوير الجهاز.)

يفحص المثال قيمة CSS كل ثانيتين. يتطلب القليل من كود JavaScript ، ولكن من الضروري إجراء استطلاع عن التغييرات – لا يمكنك الكشف تلقائيًا عن تغيير قيمة الخاصية المخصصة باستخدام CSS.

كما أنه لا يمكن كتابة القيمة إلى عنصر زائف واكتشاف التغيير باستخدام DOM Mutation Observer . العناصر الزائفة ليست جزءًا “حقيقيًا” من DOM!

هل تحتاج إلى حل استضافة يمنحك ميزة تنافسية؟ لقد جعلك Kinsta مغطى بسرعة لا تصدق وأحدث مستويات الأمان والتوسع التلقائي. تحقق من خططنا

مزايا:

إنها تقنية بسيطة تستخدم في الغالب CSS وتطابق استعلامات الوسائط الحقيقية.

يمكن تعديل أي خصائص CSS أخرى في نفس الوقت.

ليست هناك حاجة لتكرار أو تحليل سلاسل استعلام وسائط JavaScript.

العيب الأساسي هو أنه لا يمكنك الرد تلقائيًا على تغيير في بُعد إطار عرض المتصفح. إذا قام المستخدم بتدوير هاتفه من الاتجاه الرأسي إلى الاتجاه الأفقي ، فلن يعرف JavaScript أبدًا. يمكنك إجراء استقصاء متكرر للتغييرات ، ولكن هذا غير فعال وينتج عنه الفاصل الزمني الذي تراه في العرض التوضيحي الخاص بنا.

تعد مراقبة خصائص CSS المخصصة تقنية جديدة ، ولكنها عملية فقط عندما:

يمكن إصلاح التخطيط عند النقطة التي يتم فيها تقديم الصفحة في البداية. من المحتمل وجود كشك أو محطة نقطة بيع ، ولكن من المحتمل أن يكون لها دقة ثابتة وتخطيط واحد ، لذلك تصبح استعلامات وسائط JavaScript غير ذات صلة.

يعمل الموقع أو التطبيق بالفعل على تشغيل وظائف متكررة تستند إلى الوقت ، مثل الرسوم المتحركة للعبة. يمكن التحقق من الخاصية المخصصة في نفس الوقت لتحديد ما إذا كانت تغييرات التخطيط مطلوبة أم لا.

الخيار 3: استخدام matchMedia API

تعد واجهة برمجة تطبيقات matchMedia غير معتادة إلى حد ما ولكنها تتيح لك تنفيذ استعلام وسائط JavaScript. إنه مدعوم في معظم المتصفحات بدءًا من IE10 وما بعده. تقوم المُنشئ بإرجاع كائن MediaQueryList الذي يحتوي على خاصية مطابقة والتي يتم تقييمها إلى true أو false لاستعلام الوسائط المحدد الخاص بها.

يتم إخراج الكود التالي صحيحًا عندما يكون عرض إطار عرض المتصفح 800 بكسل أو أكبر:

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
console.log( mqLarge.matches );

يمكن تطبيق حدث “تغيير” على كائن MediaQueryList. يتم تشغيل هذا في كل مرة تتغير فيها حالة المطابقات: تصبح صحيحة (أكثر من 800 بكسل) بعد أن كانت خطأ سابقًا (أقل من 800 بكسل) أو العكس.

يتم تمرير دالة معالج الاستلام إلى كائن MediaQueryList باعتباره المعلمة الأولى:

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
mqLarge.addEventListener('change', mqHandler);

// media query handler function
function mqHandler(e) {
 
  console.log(
    e.matches ? 'large' : 'not large'
  );
 
}

المعالج يعمل فقط عندما تتغير خاصية المطابقات. لن يتم تشغيله عند تحميل الصفحة في البداية ، لذا يمكنك استدعاء الوظيفة مباشرةً لتحديد حالة البداية:

// initial state
mqHandler(mqLarge);

و API يعمل بشكل جيد عندما كنت تتحرك بين دولتين متميزة. لتحليل ثلاثة أو أكثر من الدول، مثل صغيرة ، متوسطة ، و كبيرة ، وأنها سوف تحتاج إلى مزيد من التعليمات البرمجية.

ابدأ بتحديد كائن حالة الشاشة مع كائنات matchMedia المرتبطة:

const
  screen = {
    small : null,
    medium: window.matchMedia( '(min-width: 400px)' ),
    large : window.matchMedia( '(min-width: 800px)' )
  };

انها ليست ضرورية لتحديد كائن matchMedia على صغيرة الدولة لمعالج الأحداث المتوسطة من شأنه أن يؤدي عند الانتقال بين صغيرة و متوسطة .

ويمكن بعد ذلك المستمعين الحدث يتم تعيين ل المتوسطة و الكبيرة الأحداث. هذه تستدعي نفس دالة المعالج mqHandler ():

// media query change events
for (let [scr, mq] of Object.entries(screen)) {
  if (mq) mq.addEventListener('change', mqHandler);
}

وظيفة معالج يجب أن تحقق كافة الكائنات MediaQueryList لتحديد ما إذا كانت صغيرة ، متوسطة ، أو كبيرة غير نشط حاليا. يجب تشغيل المباريات في حجم النظام منذ بعرض 999px أن تتطابق كل من المتوسطة و الكبيرة – فقط أكبر أن “الفوز”:

// media query handler function
function mqHandler() {
 
  let size = null;
  for (let [scr, mq] of Object.entries(screen)) {
    if (!mq || mq.matches) size = scr;
  }
 
  console.log(size);
 
}

يمكنك مشاهدة عرض عملي هنا . (في حالة استخدام مستعرض سطح المكتب ، افتح هذا الرابط في نافذة جديدة لتسهيل تغيير الحجم. يمكن لمستخدمي الجوال تدوير الجهاز.)

استخدامات المثال هي:

استعلامات الوسائط في CSS لتعيين وعرض خاصية مخصصة (كما هو موضح في الخيار 2 أعلاه).

استعلامات وسائط متطابقة في كائنات matchMedia لمراقبة تغييرات الأبعاد في JavaScript. سيتغير إخراج JavaScript في نفس الوقت بالضبط.

المزايا الرئيسية لاستخدام matchMedia API هي:

إنها مدفوعة بالأحداث وفعالة في معالجة تغييرات استعلام الوسائط.

يستخدم سلاسل استعلام وسائط متطابقة مثل CSS.

العيوب:

تتطلب معالجة استعلامين أو أكثر عن الوسائط مزيدًا من التفكير ومنطق الكود.

ربما تحتاج إلى تكرار سلاسل استعلام الوسائط في كود CSS و JavaScript. قد يؤدي ذلك إلى حدوث أخطاء إذا لم تقم بإبقائها متزامنة.

لتجنب عدم تطابق استعلام الوسائط ، يمكنك التفكير في استخدام الرموز المميزة للتصميم في نظام الإنشاء الخاص بك. يتم تحديد سلاسل استعلام الوسائط في ملف JSON (أو ملف مشابه) ويتم إدخال القيم في كود CSS و JavaScript في وقت الإنشاء.

باختصار ، من المرجح أن تكون matchMedia API هي الطريقة الأكثر فعالية وعملية لتنفيذ استعلام وسائط JavaScript. يحتوي على بعض المراوغات ، لكنه الخيار الأفضل في معظم المواقف.

ملخص

أصبحت خيارات تحجيم CSS الجوهرية قابلة للتطبيق بشكل متزايد ، ولكن تظل الاستعلامات عن الوسائط أساس تصميم الويب سريع الاستجابة لمعظم المواقع. ستكون دائمًا ضرورية للتعامل مع التخطيطات وتفضيلات المستخدم الأكثر تعقيدًا ، مثل الوضع الفاتح / الداكن.

حاول الاحتفاظ باستعلامات الوسائط في CSS وحدها حيثما أمكن ذلك. عندما لا يكون لديك خيار سوى المغامرة في عالم JavaScript ، فإن matchMedia API توفر تحكمًا إضافيًا لمكونات استعلام وسائط JavaScript ، والتي تتطلب وظائف إضافية قائمة على الأبعاد.