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

css media query

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

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

Viewport Size for Devices
عرض الشاشة	اسم الجهاز
412px	Samsung S20 Ultra
393px	Xiaomi Mi 10
390px	iPhone 12
428px	iPhone 12 Pro Max
414px	iPhone 11
414px	iPhone 11 Pro Max
768px	iPad
1024px	iPad pro
1366px	Laptop 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 media query

شرح 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;}