سيذكر هذا المنشور الإرشادات اللازمة لتنفيذ استعلامات الوسائط.
كيفية تنفيذ استعلامات الوسائط للأجهزة المحمولة؟
يمكن تطبيق استعلام الوسائط على الأجهزة المحمولة بمجرد الإشارة إلى ' @وسائط علامة وتحديد حجم الشاشة بين الأقواس الصغيرة. يمكن بعد ذلك إضافة CSS لاستعلام الوسائط هذا داخل الأقواس المتعرجة. عندما يتوافق حجم الشاشة مع الحجم المحدد من قبل المستخدم، فإنه سيتم تطبيق استعلام الوسائط المذكور.
دعونا نلقي نظرة عامة على مثال عملي لمعرفة كيفية تنفيذ استعلامات الوسائط للأجهزة المحمولة.
مثال: إنشاء تخطيط يتغير من تخطيط عمودين إلى تخطيط عمود واحد عن طريق تطبيق استعلامات الوسائط
في المثال أدناه، سيتغير تخطيط صفحة الويب من تخطيط عمود إلى تخطيط عمود واحد:
الخطوة 1: إنشاء بنية HTML
- أولاً، قم بإنشاء ملف HTML وربط ملف ورقة أنماط CSS الخارجي بداخله <الرأس> قسم.
- ثم قم بإنشاء <الرأس> قسم وأضف عنوان موقع الويب باستخدام <ح1> بطاقة شعار.
- إنشاء <ديف> بواسطة اسم الفئة 'container-class' واثنين آخرين من بداخلها يحمل اسم الفئة ' عمود '. < جسم >
<الرأس>
< h1 > تلميح لينكس < / h1 >
< / رأس>
< شعبة فصل = 'فئة الحاوية' >
< شعبة فصل = 'عمود' >
< h2 > القسم الاول < / h2 >
< ص > يعد Linux Hint واحدًا من أفضل منصات التعلم الإلكتروني. < / ص >
< / شعبة >
< شعبة فصل = 'عمود' >
< h2 > القسم الثاني < / h2 >
< ص > يعد Linux Hint واحدًا من أفضل منصات التعلم الإلكتروني. < / ص >
< / شعبة >
< / شعبة >
< / جسم >الخطوة 2: تطبيق CSS
في قسم الجسم:- أولاً، حدد قسم الجسم بكتابة “ جسم 'علامة وذكر الأقواس المتعرجة.
- داخل الأقواس، حدد عائلة الخط، ولون الخلفية، والهامش، والحشو.
على ال <الرأس> قسم:
- حدد لون النص، ومحاذاة النص، ولون الخلفية، والحشو.
على ال 'فئة الحاوية' شعبة:
- تعيين ' عرض 'قيمة العقار إلى' ثني 'لإنشاء Flexbox.
- استخدم ال ' تبرير المحتوى ' لإضافة مسافة بين المحتوى وإضافة الحشو.
في فئة العمود:
- أولاً، حدد القيمة المذكورة لـ ' ثني خاصية 'لإضافة مسافة بين قسمي التخطيط.
- بعد ذلك، أضف لون الخلفية والحدود والحشوة وحجم الصندوق.
الخطوة 3: تطبيق استعلام الوسائط
- لتطبيق استعلام الوسائط للأجهزة المحمولة، قم أولاً بإضافة ' @وسائط ' بطاقة شعار.
- ثم حدد القيمة ' 768 بكسل ' وهو أمر نموذجي بالنسبة للأجهزة المحمولة إلى ' أقصى عرض خاصية ضمن الأقواس الصغيرة.
- بعد ذلك قم بتحديد ' عمود 'القيمة إلى' الاتجاه المرن 'الخاصية التي ستنطبق على' فئة الحاوية '. سيؤدي هذا إلى تغيير العمودين إلى عمود واحد كلما تم اكتشاف حجم الشاشة المحدد.
- وأخيرًا، قم بتطبيق CSS على ' عمود 'الفئة وتحديد' هامِش ' و ' ثني ' قيم:
عائلة الخط: بلا الرقيق؛
خلفية- لون : فضة؛
هامِش: 0 ;
حشوة: 0 ;
}
header {
خلفية- لون : #2f4f4f;
الحشو: 20 بكسل؛
نص- محاذاة : مركز؛
لون : أبيض؛
}
.حاوية- فصل {
العرض: فليكس؛
يبرر- محتوى : الفضاء بين؛
الحشو: 20 بكسل؛
}
.عمود {
ثني: 0 1 احسب ( خمسون % - 10 بكسل ) ;
حدود : 1 بكسل أخضر خالص؛
خلفية- لون : أبيض؛
تحجيم الصندوق: صندوق الحدود؛
الحشو: 20 بكسل؛
}
@ وسائط ( الأعلى- عرض : 768 بكسل ) {
.حاوية- فصل {
الاتجاه المرن: العمود؛
}
.عمود {
ثني: 0 1 100 %؛
الهامش السفلي: 20 بكسل؛
}
}انتاج |
هنا هو إخراج صفحة الويب بعد تطبيق استعلام الوسائط. هذا الإخراج عبارة عن تخطيط سريع الاستجابة مكون من عمودين:
عندما تلبي الشاشة الأبعاد المحددة باستخدام استعلام الوسائط للجوال، فإنها تتحول إلى تخطيط من عمود واحد:
خاتمة
لتنفيذ استعلامات الوسائط للأجهزة المحمولة، قم أولاً بتضمين ' إطار العرض ' في ال ' رأس ' قسم. ثم اكتب CSS خاصًا بتصميم الهاتف المحمول. بعد ذلك قم بإضافة استعلام الوسائط باستخدام علامة “@media” وتحديد حجم شاشة الهاتف المحمول. على سبيل المثال، حدد 768 بكسل للأجهزة اللوحية و480 بكسل للهواتف المحمولة. لقد أوضحت هذه المقالة الإجراء الخاص بتنفيذ استعلامات الوسائط للأجهزة المحمولة.