CSSإستعلامات الوسائط

ما هي إستعلامات الوسائط

إستعلامات الوسائط ( Media Queries ) تتيح لك إمكانية تطبيق خصائص تصميم مختلفة بناءاً على أحجام الشاشات، نوعية الأجهزة التي يتم عرض الصفحة عليها (هاتف، حاسوب، تلفاز، طابعة) و غيرها.

في هذا الدرس سنشرح إستعلامات الوسائط الأكثر استخداماً و المدعومة من قبل جميع المتصفحات.

قواعد إستعلامات الوسائط

بدايةً، للبدء بالتعامل مع إستعلامات الوسائط نستخدم الكلمة المفتاحية @media ثم نضع أقواس البداية و النهاية و بداخلها نحدد الخصائص التي نريد إضافتها للعناصر على النحو التالي.

• @media - يجب وضعها في البداية للبدء باستخدام إستعلامات الوسائط.
• mediatypes - مكانها نضع كلمة مفتاحية أو أكثر تشير إلى نوع الوسائط مع الإشارة إلى أنه يجب وضع فاصلة بين كل كلمتين.
• expressions - مكانها يمكن وضع شرط أو أكثر يكون متوافق مع نوع الوسائط ليحدد متى سيتم تطبيق الخصائص.
• not - كلمة إختيارية يمكن وضعها لعدم تطبيق الخصائص في الحالة و الشرط الموضوعين.
• only - كلمة إختيارية يمكن وضعها لتطبيق الخصائص في الحالة و الشرط الموضوعين.
• CSS-Code - مكانها يمكن وضع أي كود CSS ليتم تطبيقه في حال كان نوع الوسائط و الشرط الموضوع تم تحقيقهما.

أنواع إستعلامات الوسائط

نوع الوسائط ( Media Type ) يقصد به نوع الجهاز أو السبب الرئيسي الذي على أساسه سيتم تطبيق الخصائص. فيما يلي أهم أنواع إستعلامات الوسائط.

في المثال التالي جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.

@media screen and (max-width: 400px) {
    p {
        color: red;
    }
}

في المثال التالي جعلنا لون النص الأساسي رمادي، ثم جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.

p {
    color: gray;
}

@media screen and (max-width: 400px) {
    p {
        color: red;
    }
}

هنا قمنا بوضع اللون الرمادي كلون أساسي بعد تحديد اللون بواسطة إستعلامات الوسائط مما يعني أن اللون الرمادي هو اللون الذي سيتم إعتماده في كل الحالات.

@media screen and (max-width: 400px) {
    p {
        color: red;
    }
}

p {
    color: gray;
}

في المثال التالي جعلنا لون النص رمادي و لكنه يصبح أحمر في حال كان سيتم طباعة محتوى الصفحة على ورقة.

p {
    color: gray;
}

@media print {
    p {
        color: red;
    }
}

في المثال التالي حددنا أن لون النص هو بني في حال استعراض الصفحة على شاشة أو على آلة طباعة.

@media screen, print {
    p {
        color: brown;
    }
}

المثال التالي هو نفسه المثال السابق مع استخدام الكلمة or بدلاً من الفاصلة.

@media screen or print {
    p {
        color: brown;
    }
}

في المثال التالي حددنا أن لون النص هو بني في كل الحالات ما عدا إن تم طباعته.

@media not print {
    p {
        color: brown;
    }
}

شروط إستعلامات الوسائط

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

في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل فإنه سيتم تطبيق الخصائص.

@media (min-width: 400px) {
    body {
        padding: 20px
    }
}

في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل و على الأكثر 1000 بكسل فإنه سيتم تطبيق الخصائص.

@media (min-width: 400px) and (max-width: 1000px) {
    body {
        padding: 20px;
    }
}

في المثال التالي إذا كان حجم الشاشة ما بين 400 و 1000 بكسل فإنه سيتم تطبيق الخصائص.

@media (400px <= width <= 1000px) {
    body {
        padding: 20px;
    }
}

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

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;
    }
}