أساسيات Media Queries

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 65 من 76.

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

الصياغة الأساسية للاستعلامات عن الوسائط:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

الشرط: القاعدة التي تُفعّل الأنماط (مثل max-width: 600px).
المحدِّد: عنصر HTML أو العناصر التي سيتم تنسيقها.

property: خاصية CSS المراد تعيينها (مثل width وfont-size).
value: القيمة المُسندة إلى الخاصية، والتي تتغير وفقًا لشرط الاستعلام الإعلامي.

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

max-width: يقيّد الأنماط بالشاشات التي لا يتجاوز عرضها الحد الأقصى (مثل max-width: 600px).
min-width: يطبّق الأنماط على الشاشات التي لا يقل عرضها عن الحد الأدنى (مثل min-width: 768px).

max-height: يقيّد الأنماط بالشاشات التي لا يتجاوز ارتفاعها حدًا أقصى (مثل max-height: 400px).
min-height: يطبّق الأنماط على الشاشات التي يبلغ ارتفاعها حدًا أدنى (مثل min-height: 500px).

تساعدك هذه الشروط على التحكم في مظهر موقعك الإلكتروني على الأجهزة والاتجاهات المختلفة.

مثال:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

يغيّر هذا لون الخلفية إلى lightblue عندما يكون عرض الشاشة 600px أو أقل. أما للشاشات التي يتراوح عرضها بين 601px و1024px، فسيكون لون الخلفية lightgreen.

التحدي

سهل

أُعطيت مستند HTML يحتوي على عنوان (<h1>) وفقرة (<p>) وعنصر <div>. مهمتك هي إضافة استعلامات وسائط لجعل الصفحة متجاوبة. اتبع الخطوات أدناه:

أضف استعلام @media للشاشات التي لا يتجاوز عرضها 600px:
- اضبط لون خلفية الجسم على الأزرق الفاتح.
- اضبط حجم خط العنوان (<h1>) على 5vw (5% من عرض منفذ العرض).
أضف استعلام @media للشاشات التي لا يقل عرضها عن 601px ولا يتجاوز 1024px:
- اضبط لون خلفية الجسم على الأخضر الفاتح.
- اضبط حجم خط العنوان (<h1>) على 3vw (3% من عرض منفذ العرض).

غيّر حجم نافذة المتصفح لترى كيف تضبط استعلامات الوسائط التخطيط ديناميكيًا.

جرّب بنفسك

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>