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

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

في هذا الدرس سنقوم بشرح :
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;}

يُمكنك متابعة اخر أخبار الموقع و القناة عليالفيسبوك 🧡