أساسيات Media Queries

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

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

الصيغة الأساسية لاستعلامات الوسائط (Media Queries):

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

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

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

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

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 queries) لجعل الصفحة متجاوبة. اتبع الخطوات التالية:

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

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

ورقة مرجعية

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

الصيغة الأساسية:

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

الشروط الشائعة:

max-width: يحدد الأنماط للشاشات ذات العرض الأقصى
min-width: يطبق الأنماط على الشاشات ذات العرض الأدنى
max-height: يحدد الأنماط للشاشات ذات الارتفاع الأقصى
min-height: يطبق الأنماط على الشاشات ذات الارتفاع الأدنى

مثال:

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

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

جرّب بنفسك

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