كيف تكتب استعلام وسائط CSS؟

شاشةmedia و (الحد الأدنى للعرض: 1000 بكسل) {}

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

بعد هذه العناصر من Media Query ، أضف قوسًا مجعدًا للفتح والإغلاق مشابهًا لما ستفعله في أي قاعدة CSS عادية.

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

 media screen and (min-width: 1000px) {body {font-size: 20px؛ }

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





instagram viewer
 إضافة المزيد من الأنماط 

ضع أكبر عدد ممكن قواعد CSS ضمن استعلام الوسائط هذا حسب الحاجة لضبط المظهر المرئي لموقعك على الويب. على سبيل المثال ، ليس فقط لزيادة حجم الخط إلى 20 بكسل ، ولكن أيضًا لتغيير لون جميع الفقرات إلى الأسود (# 000000) ، أضف هذا: 
شاشةmedia و (الحد الأدنى للعرض: 1000 بكسل) {
الجسم {
حجم الخط: 20 بكسل ؛
}
ص {
اللون: # 000000 ؛
}
}
 إضافة المزيد من استعلامات الوسائط 

بالإضافة إلى ذلك ، يمكنك إضافة المزيد من استعلامات الوسائط لكل الأحجام الكبيرة ، وإدراجها في ورقة الأنماط الخاصة بك كما يلي: 
شاشةmedia و (الحد الأدنى للعرض: 1000 بكسل) {
الجسم {
حجم الخط: 20 بكسل ؛
}
ص {
اللون: # 000000 ؛
{
}
شاشةmedia و (الحد الأدنى للعرض: 1400 بكسل) {
الجسم {
حجم الخط: 24 بكسل ؛
}
}

تبدأ استعلامات الوسائط الأولى بعرض 1000 بكسل ، وتغيير حجم الخط إلى 20 بكسل. بعد ذلك ، بمجرد أن يتجاوز المتصفح 1400 بكسل ، سيتغير حجم الخط مرة أخرى إلى 24 بكسل. أضف العديد من استعلامات الوسائط حسب الحاجة لموقع الويب الخاص بك. 
 العرض الأدنى والحد الأقصى للعرض 

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

إذا كنت تستخدم أقصى عرض، إنه يعمل بالطريقة المعاكسة. يتم تطبيق استعلام الوسائط "max-width: 1000px" بعد انخفاض حجم المتصفح عن هذا الحجم. 

استشهد بهذه المادة.