أساسيات Media Queries

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

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

الصياغة الأساسية لـ Media Queries:

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

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

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

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

max-width: يقيّد الأنماط على الشاشات ذات العرض الأقصى (مثلًا، max-width: 600px).
min-width: يطبّق الأنماط على الشاشات ذات العرض الأدنى (مثلًا، min-width: 768px).

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

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

مثال:

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

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

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

التحدي

سهل

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

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

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

جرّب بنفسك

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--اكتب كودك هنا-->
        
    </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>