يعد استعلام @media الخاص بـ CSS3 ميزة قوية تسمح لنا بتطبيق قواعد نمط مختلفة بناءً على أنواع الوسائط المختلفة وخصائص الجهاز. يتيح لنا ذلك إنشاء تصميمات سريعة الاستجابة تضمن أن يوفر موقع الويب أو التطبيق تجربة مستخدم رائعة عبر مجموعة متنوعة من الأجهزة وأحجام الشاشات. ستناقش هذه المقالة التعريف وبناء الجملة وسيناريوهات الاستخدام والمشكلات الشائعة لاستعلام @media بالتفصيل.
تسمح لك قواعد @media الخاصة بـ CSS3 بتطبيق قواعد أنماط مختلفة بناءً على نوع الوسائط وخصائصها. نوع الوسائط (Media Type) مثل screen (الشاشة)، print (الطباعة)، وما إلى ذلك، بينما تُستخدم ميزات الوسائط (ميزات الوسائط) مثل width height orientation وما إلى ذلك، لوصف الخصائص المحددة للجهاز.
بناء الجملة الأساسي لاستعلام @media هو كما يلي:
@media نوع الوسائط و|ليس|فقط (ميزة الوسائط) {
/* قواعد CSS*/
}screen print وما إلى ذلك. إذا تم حذفه، فسيتم تعيينه افتراضيًا على كافة أنواع الوسائط. ميزة الوسائط : تحديد شروط ميزات الوسائط وقيمها، مثل min-width max-width orientation وما إلى ذلك.في استعلامات @media، يمكنك استخدام العوامل المنطقية التالية لدمج شروط الوسائط:
و : يشير إلى أنه يجب استيفاء كافة الشروط. not : يشير إلى أنه يتم تطبيق النمط عند عدم استيفاء الشرط. فقط : يستخدم لمنع المتصفحات القديمة التي لا تدعم استعلامات الوسائط من تطبيق الأنماط. الفاصلة : تشير إلى أنه يتم تطبيق النمط عند استيفاء أي من الشروط المتعددة.1. قم بضبط الأنماط وفقًا لحجم الشاشة
شاشة الوسائط و(الحد الأدنى للعرض: 600 بكسل) {
جسم {
لون الخلفية: أزرق فاتح؛
}
}عندما يكون عرض الشاشة 600 بكسل على الأقل، يتغير لون خلفية الصفحة إلى اللون الأزرق الفاتح.
2. تصميم سريع الاستجابة
شاشة الوسائط و (العرض الأقصى: 800 بكسل) {
.حاوية {
العرض: 100%؛
}
}
شاشة الوسائط و(الحد الأدنى للعرض: 801 بكسل) {
.حاوية {
العرض: 750 بكسل؛
}
}قم بتغيير عرض الحاوية بناءً على عرض الشاشة للحصول على تصميم سريع الاستجابة.
3. أسلوب الطباعة
@طباعة الوسائط {
جسم {
حجم الخط: 12 نقطة؛
اللون: أسود؛
الخلفية: أبيض؛
}
}قم بتعيين أنماط معينة للطباعة، مثل حجم الخط واللون والخلفية.
4. الشاشات الأفقية والعمودية
شاشة الوسائط و (الاتجاه: أفقي) {
#الشريط الجانبي {
العرض: لا شيء؛
}
}إخفاء الشريط الجانبي عندما يكون الجهاز في الوضع الأفقي.
يوفر CSS3 مجموعة متنوعة من ميزات الوسائط فيما يلي بعض الميزات شائعة الاستخدام:
العرض ، الحد الأدنى للعرض ، الحد الأقصى للعرض : تحديد عرض المنطقة المرئية من الصفحة في جهاز الإخراج. الارتفاع ، الحد الأدنى للارتفاع ، الحد الأقصى للارتفاع : تحديد ارتفاع المنطقة المرئية من الصفحة في جهاز الإخراج. الاتجاه : تحديد اتجاه الجهاز، مثلportrait (شاشة عمودية) landscape (شاشة أفقية). الدقة : يحدد دقة الجهاز. اللون ومؤشر اللون : تحديد إمكانيات اللون ومؤشر اللون.min-width والحد max-width كشروط للحكم، يجب عليك التأكد من فرز نطاق الحالة من صغير إلى كبير أو من كبير إلى صغير لتجنب مشاكل تغطية النمط. تعارضات الأنماط : تأكد من عدم تجاوز الأنماط في استعلامات @media بواسطة قواعد CSS اللاحقة. يوصى بكتابة نمط استعلام @media في النهاية. العلامة الوصفية : قم بتعيين <meta name="viewport" content="width=device-width, initial-scale=1.0"> للتأكد من أن الأجهزة المحمولة يمكنها عرض الصفحة بشكل صحيح. خطأ في بناء الجملة : تأكد من صحة بناء جملة استعلام @media، خاصة المسافة بعد العامل المنطقي ولا تكتب الفاصل ";" بين قوسين.يعد استعلام @media الخاص بـ CSS3 أداة مهمة لإنشاء تصميمات سريعة الاستجابة، مما يسمح لنا بتطبيق قواعد أنماط مختلفة بناءً على أنواع الوسائط المختلفة وخصائص الوسائط. من خلال الاستفادة من استعلامات @media، يمكننا التأكد من أن موقعنا أو تطبيقنا يوفر تجربة مستخدم رائعة عبر مجموعة متنوعة من الأجهزة وأحجام الشاشات. آمل أن تساعدك هذه المقالة على فهم استعلامات @media واستخدامها بشكل أفضل.
بهذا نختتم هذه المقالة حول استعلام @media في CSS3. لمزيد من محتوى استعلام @media ذي الصلة بـ CSS3، يرجى البحث في المقالات السابقة على downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه، وآمل أن تدعم الرموز السفلية بشكل أكبر في المستقبل.