كيفية استخدام استعلامات الوسائط في HTML و CSS لإنشاء مواقع ويب سريعة الاستجابة

إذا كنت ترغب في تطوير مواقع الويب / تطبيقات الويب ، فإن معرفة كيفية إنشاء تصميمات سريعة الاستجابة أمر ضروري لنجاحك.

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

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

فهم التصميم المستجيب

باختصار ، يتعامل التصميم سريع الاستجابة مع استخدام HTML / CSS لإنشاء تخطيط تطبيق ويب / موقع ويب يتكيف مع أحجام الشاشات المختلفة. في HTML / CSS ، توجد عدة طرق مختلفة لتحقيق الاستجابة في تصميم موقع الويب:

استخدام وحدات rem و em بدلاً من وحدات البكسل (px)
ضبط إطار العرض / المقياس لكل صفحة ويب
استخدام الاستعلامات الإعلامية

ما هي استعلامات الوسائط؟

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

اقرأ المزيد: ورقة الغش الخاصة بخصائص CSS3 الأساسية

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

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

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

هيكل استعلامات الوسائط

مثال على بنية الاستعلام عن الوسائط

  
@media only/not media-type and (expression){  
/*CSS code*/  
}

يتضمن الهيكل العام للاستعلام عن الوسائط ما يلي:

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

متعلق ب: استخدام CSS لتنسيق المستندات للطباعة

مثال على استعلام وسائط باستخدام الكلمة الأساسية فقط

  
@media only screen and (max-width: 450px){  
body{  
background-color: blue;  
}  
}

يطبق المثال أعلاه أسلوب CSS (تحديدًا لون الخلفية الأزرق) على شاشات الأجهزة فقط التي يبلغ عرضها 450 بكسل أو أقل - أي الهواتف الذكية بشكل أساسي. يمكن استبدال الكلمة الأساسية الوحيدة بالكلمة not الأساسية ومن ثم ينطبق نمط CSS في استعلام الوسائط أعلاه على المطبوعات والكلام فقط.

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

مثال على استعلام الوسائط الافتراضي

  
/*design for smartphones*/  
@media(max-width: 450px){  
body{  
background-color: blue;  
}  
}

وضع الاستعلامات الإعلامية

استعلام الوسائط هو خاصية CSS ؛ لذلك ، يمكن استخدامه فقط داخل لغة التصميم. هناك ثلاث طرق مختلفة لتضمين CSS في التعليمات البرمجية الخاصة بك ؛ ومع ذلك ، توفر طريقتان فقط من هذه الطرق طريقة عملية لتضمين استعلامات الوسائط في برامجك - CSS الداخلية أو الخارجية.

تتضمن الطريقة الداخلية إضافة العلامة إلى علامة ملف HTML ، وإنشاء استعلام الوسائط داخل معلمات العلامة.

تتضمن الطريقة الخارجية إنشاء استعلام وسائط في ملف CSS خارجي وربطه بملف HTML الخاص بك عبر العلامة.

مجموعة استعلامات الوسائط

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

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

مثال على استعلام وسائط الكمبيوتر اللوحي

  
/* design for tablets */  
 @media(max-width: 800px){  
 body{  
 background-color: red;  
 }  
 }

المشكلة الوحيدة هي أنه نظرًا لترتيب الأسبقية ، سيكون للأجهزة اللوحية لون خلفية أحمر وستكون للهواتف الذكية الآن لون خلفية أحمر لأن 450 بكسل وأقل أقل من 800 بكسل.

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

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

استعلام عن وسائط الكمبيوتر اللوحي مع مثال النطاق

  
 /* design for tablets */  
 @media(max-width: 800px) and (min-width:451){  
 body{  
 background-color: red;  
 }  
 }

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

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

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

العلامة هي عنصر HTML يُستخدم لاستيراد أنماط CSS من ورقة أنماط خارجية. تحتوي هذه العلامة على خاصية وسائط تعمل بنفس طريقة عمل استعلام الوسائط في CSS.

استخدام استعلامات الوسائط في مثال علامة الارتباط

  
  
  
  href='tablet.css'>

يجب وضع الكود أعلاه في علامة ملف HTML الخاص بك. الآن كل ما عليك فعله هو إنشاء ثلاثة ملفات CSS منفصلة بأسماء الملفات main.css و tablet.css و phone.css - ثم إنشاء التصميم المحدد الذي تريده لكل جهاز.

سيتم تطبيق النمط الموجود في الملف الرئيسي على جميع الشاشات التي يزيد عرضها عن 800 بكسل ، وسينطبق النمط الموجود في ملف الجهاز اللوحي على جميع الشاشات التي يتراوح عرضها بين 450 بكسل و 801 بكسل ، وسينطبق النمط الموجود في ملف الهاتف الذكي على جميع الشاشات أدناه 451 بكسل.

كم لاستبدال بطارية الهواء ماك بوك

لديك الآن الأدوات اللازمة لإنشاء تصميمات سريعة الاستجابة

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

حقوق الصورة: مساحة سلبية / بيكسلز

يشارك يشارك سقسقة بريد الالكتروني كيفية تعيين صورة الخلفية في CSS

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

اقرأ التالي مواضيع ذات صلة

برمجة
تطوير الشبكة
تصميم المواقع
CSS

نبذة عن الكاتب قاديشا كين(21 مقالة منشورة)

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

المزيد من Kadeisha Kean

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك