CSS إستعلامات الوسائط
ما هي إستعلامات الوسائط
إستعلامات الوسائط ( Media Queries ) تتيح لك إمكانية تطبيق خصائص تصميم مختلفة بناءاً على أحجام الشاشات، نوعية الأجهزة التي يتم عرض الصفحة عليها (هاتف، حاسوب، تلفاز، طابعة) و غيرها.
في هذا الدرس سنشرح إستعلامات الوسائط الأكثر استخداماً و المدعومة من قبل جميع المتصفحات.
إستعلامات الوسائط مهمة جداً عند بناء تصاميم متجاوبة ( Responsive ) تظهر بشكل ممتاز على جميع الأجهزة و لا غنى عنها لذلك.
قواعد إستعلامات الوسائط
بدايةً، للبدء بالتعامل مع إستعلامات الوسائط نستخدم الكلمة المفتاحية @media
ثم نضع أقواس البداية و النهاية و بداخلها نحدد الخصائص التي نريد إضافتها للعناصر على النحو التالي.
CSS-Code
}
- @media يجب وضعها في البداية للبدء باستخدام إستعلامات الوسائط.
- mediatypes مكانها نضع كلمة مفتاحية أو أكثر تشير إلى نوع الوسائط مع الإشارة إلى أ،ه يجب وضع فاصلة بين كل كلمتين.
- expressions مكانها يمكن وضع شرط أو أكثر يكون متوافق مع نوع الوسائط ليحدد متى سيتم تطبيق الخصائص.
- not كلمة إختيارية يمكن وضعها لعدم تطبيق الخصائص في الحالة و الشرط الموضوعين.
- only كلمة إختيارية يمكن وضعها لتطبيق الخصائص في الحالة و الشرط الموضوعين.
- CSS-Code مكانها يمكن وضع أي كود CSS ليتم تطبيقه في حال كان نوع الوسائط و الشرط الموضوع تم تحقيقهما.
أنواع إستعلامات الوسائط
نوع الوسائط ( Media Type ) يقصد به نوع الجهاز أو السبب الرئيسي الذي على أساسه سيتم تطبيق الخصائص. فيما يلي أهم أنواع إستعلامات الوسائط.
النوع | إستخدامه |
---|---|
all |
لتطبيق الخصائص مهما كان النوع و هذه القيمة الإفتراضية. |
screen |
لتطبيق الخصائص فقط في حال إستعراض الصفحة على شاشة سواء حاسوب، هاتف، كمبيوتر، تلفاز. |
print |
لتطبيق الخصائص في حال طباعة الصفحة فقط. |
في المثال التالي جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.
إستعلامات الوسائط يجب تعريفها في الأخير بعد تعريف الخصائص الأصلية و إلا فإن المتصفح سيتجاهلها في حال حدوث تعارض.
في المثال التالي جعلنا لون النص الأساسي رمادي، ثم جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.
المثال الثاني
p { color: gray; } @media screen and (max-width: 400px) { p { color: red; } }جرب الكود
في حال وضعت إستعلامات الوسائط في البداية و لم تستخدم الكلمة !important
ثم أعدت تعريفها فإنها ستفقد أولية التنفيذ مما يعني أنه سيتم تجاهلها.
هنا قمنا بوضع اللون الرمادي كلون أساسي بعد تحديد اللون بواسطة إستعلامات الوسائط مما يعني أن اللون الرمادي هو اللون الذي سيتم إعتماده في كل الحالات.
المثال الثالث
@media screen and (max-width: 400px) { p { color: red; } } p { color: gray; }جرب الكود
في المثال التالي جعلنا لون النص رمادي و لكنه يصبح أحمر في حال كان سيتم طباعة محتوى الصفحة على ورقة.
في المثال التالي حددنا أن لون النص هو بني في حال استعراض الصفحة على شاشة أو على آلة طباعة.
في المثال السابق كان يمكننا استخدام الكلمة or
بدلاً من الفاصلة.
المثال التالي هو نفسه المثال السابق مع استخدام الكلمة or
بدلاً من الفاصلة.
في المثال التالي حددنا أن لون النص هو بني في كل الحالات ما عدا إن تم طباعته.
شروط إستعلامات الوسائط
شروط إستعلامات الوسائط مرنة جداً حيث يمكنك وضع أكثر من شرط و يكفي أن يتحقق أحدها لكي يتم تطبيق الخصائص على العناصر، أو تضع عدة شروط و يجب أن تتحقق جميعها.
في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل فإنه سيتم تطبيق الخصائص.
في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل و على الأكثر 1000 بكسل فإنه سيتم تطبيق الخصائص.
المثال الثاني
@media (min-width: 400px) and (max-width: 1000px) { body { padding: 20px; } }جرب الكود
في المثال التالي إذا كان حجم الشاشة ما بين 400 و 1000 بكسل فإنه سيتم تطبيق الخصائص.
في المثال التالي، حجم الخط الإفتراضي سيتم اعتماده في حال لم يتحقق أي الشرط الموضوع في أي إستعلام موضوع بعده.
بالنسبة للإستعلامات فإنها موضوعة بترتيب منطقي بحيث يمكن أن يتحقق الشرط الأول أو الشرط الثاني.
المثال الرابع
h1 { font-size: 1.8rem; } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 960px) { h1 { font-size: 2.6rem; } }جرب الكود
في المثال التالي إذا كانت الشاشة معروضة بالوضع الأفقي فإنه سيتم عرض عبارة Landscape، أما إن كانت معروضة بالوضع العمودي فإنه سيتم عرض عبارة Portrait.
المثال الخامس
@media (orientation: landscape) { #orientation::before { content: 'Landscape Mode'; } } @media (orientation: portrait) { #orientation::before { content: 'Portrait Mode'; } }جرب الكود
في المثال التالي إذا كان طول مستعرض الصفحة أياً كان نوعه (شاشة، آلة طباعة إلخ..) على الأقل 680 بكسل أو كانت الشاشة معروضة بالوضع العمودي فإنه سيتم تطبيق الخصائص.
المثال السادس
@media (min-height: 680px), screen and (orientation: portrait) { body { padding: 20px; } }جرب الكود