تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

في هذا الدرس سنقوم بشرح :
css media query التي تُمكننا من التحكم في كيفية عرض الموقع علي جميع احجام الشاشات بدون اي مشاكل
css prefers-color-scheme التي تُمكننا من التحم في كيفية اظهار الموقع في حالة ال dark mode او ال light mode

css media query

لو عاوز تعمل موقع متجاوب (Responsive website) مع جميع احجام الشاشات المختلفة وعرض الموقع بدون مشاكل على الشاشات الصغيرة مثل الموبايل والشاشات الكبيرة مثل شاشات الكمبيوتر فيجب عليك اتقان خاصية ال media queries في لغة ال CSS

أولا يجب ان تأخذ فكرة عامة عن عرض الشاشات

Viewport Size for Devices
عرض الشاشةاسم الجهاز
412pxSamsung S20 Ultra
393pxXiaomi Mi 10
390pxiPhone 12
428pxiPhone 12 Pro Max
414pxiPhone 11
414pxiPhone 11 Pro Max
768pxiPad
1024pxiPad pro
1366pxLaptop 15.6"

وتقدر تعرف عرض جميع الأجهزة عن طريق هذا الموقع


ومتقلقش يا صاحبي 🧡 انت مش هتحفظ عرض الشاشات؛ انا بس عاوزك تكون عارف ان عرض شاشات الموبايل بتكون في حدود (300px : 450px) وعرض شاشات التابلت في حدود (700px : 1100px) واشهر شاشات اللابتوب (1366px)

1 المثال الأول

إذا كان لدينا عنصر (div) لونه احمر ونُريد ان يكون لونه ازرق فقط على الشاشات الأقل من 500px
فيكون الكود كالتالي:

 
<style>
 
    div {color: red;}
 
    @media (max-width: 500px) {
    div {color: blue;}
    }
 
</style>

شرح الاكواد

نبدأ بكتابة @media ثم (عرض الشاشة)
max-width: 500px تعني الشاشات الأقل من 500px

وإذا كانت
min-width: 500px فتعني الشاشات الأكبر من 500px

2 المثال الثاني

إذا كان لدينا عنصر (div) لونه احمر ونُريد ان يكون لونه ازرق فقط على الشاشات التي بين 500px و 700px
فيكون الكود كالتالي:

 
<style>
 
    div {color: red;}
 
    @media (min-width: 500px) and (max-width: 700px) {
    div {color: blue;}
    }
 
</style>

شرح الاكواد

min-width: 500px تعني الشاشات الأكبر من 500px

max-width: 700px تعني الشاشات الأقل من 700px

شرح css prefers-color-scheme

هذه ميزة حديثة جدا في ال CSS وتُمكنك من تغيير شكل الموقع الخاص بك بناءاً على إذا كان الزائر في الوضع المظلم (dark mode) او في الوضع العادي (light mode)
مثال علي ذلك:

 
@media (prefers-color-scheme: dark) {
  h1 {color: black;}
}
 
 
@media (prefers-color-scheme: light) {
  h1 {color: white;}
} 

معني هذه الاكواد انه:
- في حالة ان زائر الموقع في الوضع المظلم (dark mode) فان عنصر ال h1 سيكون لونه اسود
- واذا كان الزائر في الوضع العادي (light mode) فان عنصر ال h1 سيكون لونه ابيض

طريقة أخري prefers-color-scheme

طريقة أخري لتطبيق خاصية ال prefers-color-scheme هي عن طريق وضع الأكواد الخاصة بكل mode في ملف خارجي خاص بكل mode
مثال علي ذلك:

 
<!DOCTYPE html>
<html lang="en">
  <head>
 
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
 
  </head>
 
  <body>
    <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque soluta
      rerum labore iste tempora eveniet asperiores quam ea molestias sed
      voluptatibus modi consectetur quibusdam, ullam quod debitis dolores quis
      ipsam.
    </div>
  </body>
</html> 

نلاحظ في هذا المثال وجود ثلاث ملفات خاصة بال CSS
- الملف الأول (main.css): يوجد فيه اكواد ال CSS التي يتم تطبيقها على الموقع في جميع الأوضاع سواء ال dark او ال light
- الملف الثاني (dark.css): يوجد فيه اكواد ال CSS التي يتم تطبيقها على الموقع في حالة ال dark mode
- الملف الثالث (light.css): يوجد فيه اكواد ال CSS التي يتم تطبيقها على الموقع في حالة ال light mode

مثال علي الاكواد الموجودة في ملف main.css

 
div {
  font-size: 1.5em;
  border-radius: 12px;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 10px;} 

مثال علي الاكواد الموجودة في ملف dark.css

 
div {color: white;
background-color: #333333;} 

مثال علي الاكواد الموجودة في ملف light.css

 
div {color: black;
background-color: #ffc1a4;} 
😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡