مع الشعبية السريعة للأجهزة المحمولة، لم يعد المستخدمون يستخدمون أجهزة الكمبيوتر التقليدية فقط لتصفح محتوى الويب. بدأ المزيد والمزيد من المستخدمين في استخدام الهواتف الذكية أو الأجهزة اللوحية أو الأجهزة الأخرى ذات الأحجام المختلفة لتصفح محتوى الويب من أجل ضمان استخدام If يمكن لمستخدمي الأجهزة المختلفة الحصول على تجربة جيدة، فهم بحاجة إلى استخدام استعلامات الوسائط.
يعد الاستعلام عن الوسائط أحد أهم وظائف أوراق أنماط CSS، ويشير ما يسمى باستعلام الوسائط إلى التمييز بين الأجهزة المختلفة (مثل أجهزة الكمبيوتر والهواتف المحمولة والأجهزة اللوحية وأجهزة برايل وما إلى ذلك) بناءً على أنواع الوسائط المختلفة (أنواع الأجهزة). والشروط وتحديد أنماط CSS المختلفة لهم على التوالي. تسمح استعلامات الوسائط لـ CSS بالعمل بشكل أكثر دقة على أجهزة مختلفة أو ظروف مختلفة على نفس الجهاز، بحيث يمكن لجميع المستخدمين الحصول على تجربة مستخدم جيدة.
1. نوع الوسائط
يتم استخدام أنواع الوسائط لتمثيل فئات الأجهزة. يوفر CSS بعض الكلمات الأساسية لتمثيل أنواع الوسائط المختلفة، كما هو موضح في الجدول التالي:
2. خصائص الوسائط
بالإضافة إلى أنواع محددة، يمكن أيضًا وصف الخصائص المحددة للجهاز من خلال بعض السمات، مثل العرض والارتفاع والدقة وغيرها، كما هو موضح في الجدول التالي:
3. العوامل المنطقية
تتضمن العوامل المنطقية لا، و، وفقط. ويمكن إنشاء استعلامات الوسائط المعقدة من خلال العوامل المنطقية. ويمكنك أيضًا فصل استعلامات الوسائط المتعددة بفواصل ودمجها في قاعدة واحدة.
و: يستخدم لدمج استعلامات الوسائط المتعددة في استعلام وسائط واحد. عندما تكون كل قاعدة استعلام صحيحة، يكون استعلام الوسائط صحيحًا بالإضافة إلى ذلك، يمكن لعامل التشغيل أيضًا الجمع بين خصائص الوسائط وأنواعها.
not: يُستخدم لإلغاء استعلامات الوسائط عندما تكون قاعدة الاستعلام غير صحيحة، فإنها تُرجع صحيحًا، وإلا فإنها تُرجع خطأ. إذا تم استخدام عامل التشغيل not، فيجب أيضًا تحديد نوع الوسائط؛
فقط: لن يسري مفعوله إلا في حالة تطابق الاستعلام بأكمله، وعندما لا يتم استخدامه، ستقوم المتصفحات القديمة ببساطة بتفسير الشاشة و(الحد الأقصى للعرض: 500 بكسل) كشاشة، وتجاهل بقية الاستعلام، وتطبيق النمط على جميع الشاشات. إذا كنت تستخدم عامل التشغيل الوحيد، فيجب عليك أيضًا تحديد نوع الوسائط.
4. تحديد استعلامات الوسائط
يمكنك حاليًا تحديد استعلامات الوسائط بطريقتين:
استخدم قواعد @media أو @import لتحديد نوع الجهاز المقابل في ورقة الأنماط؛
استخدم سمة الوسائط لتحديد نوع جهاز معين في عنصر <style> أو <link> أو <source> أو عنصر HTML آخر.
(1)@ميديا
لقد ألقينا نظرة سريعة على @media في قسم "CSS @Rules". باستخدام @media، يمكنك تحديد مجموعة من استعلامات الوسائط وكتلة نمط CSS إذا كان استعلام الوسائط يتطابق مع الجهاز المستخدم فقط، فسيتم تحديد نمط CSS المحدد سيتم تطبيقه على الوثيقة. رمز العينة كما يلي:
/*على الشاشات الأقل من أو تساوي 992 بكسل، اضبط لون الخلفية على اللون الأزرق*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*على الشاشات 600 بكسل أو أقل على الشاشة، اضبط لون الخلفية على زيتوني */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @استيراد
يتم استخدام @import لاستيراد ملف نمط خارجي محدد وتحديد نوع الوسائط الهدف، ويكون نموذج التعليمات البرمجية كما يلي:
@importurl(css/screen.css)screen;/*تقديم الأنماط الخارجية، سيتم تطبيق هذا النمط فقط على شاشات الكمبيوتر*/@importurl(css/print.css)print;/*تقديم الأنماط الخارجية، سيكون هذا النمط فقط يتم تطبيقه على جهاز الطباعة*/body{background:#f5f5f5;line-height:1.2;}ملاحظة: يجب أن تظهر جميع عبارات @import في بداية ورقة الأنماط، وتتجاوز الأنماط المحددة في ورقة الأنماط الأنماط المتعارضة في أوراق الأنماط الخارجية المستوردة.
(3) سمة وسائل الإعلام
يمكنك أيضًا تحديد استعلامات الوسائط في سمات الوسائط الخاصة بـ <style> و<link> و<source> والعلامات الأخرى. نموذج التعليمات البرمجية كما يلي:
/*تطبيق هذا النمط عندما يكون عرض الصفحة أكبر من أو يساوي 900 بكسل*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*تطبيق هذا النمط عندما يكون عرض الصفحة أقل من أو يساوي 600 بكسل*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
نصيحة: يمكنك أيضًا تحديد أنواع وسائط متعددة في سمة الوسائط، باستخدام الفواصل لفصل كل نوع من أنواع الوسائط، على سبيل المثال، الوسائط=الشاشة، الطباعة.