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

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

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

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

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

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

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

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

اقرأ أكثر: ورقة الغش الخاصة بخصائص CSS3 الأساسية

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

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

media only / not media-type و (تعبير) {
/ * كود CSS * /
}

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

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

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

شاشةmedia فقط و (أقصى عرض: 450 بكسل) {
جسم{
لون الخلفية: أزرق ؛
}
}

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

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

/ * تصميم للهواتف الذكية * /
media (أقصى عرض: 450 بكسل) {
جسم{
لون الخلفية: أزرق ؛
}
}

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

تتضمن الطريقة الداخلية إضافة

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

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

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

/ * تصميم للأجهزة اللوحية * /
media (أقصى عرض: 800 بكسل) {
جسم{
لون الخلفية: أحمر ؛
}
}

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

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

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

/ * تصميم للأجهزة اللوحية * /
media (أقصى عرض: 800 بكسل) و (أقل عرض: 451) {
جسم{
لون الخلفية: أحمر ؛
}
}

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

إذا كنت لا ترغب في تضمين استعلامات الوسائط في كود 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.

اقرأ التالي

عن المؤلف